.common-usecase-cards {
    width: min(1200px, calc(100% - 32px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "featured"
        "accent"
        "secondary"
        "tertiary";
    gap: 16px;
}

.common-usecase-cards__item {
    min-width: 0;
}

.common-usecase-cards__item--featured {
    grid-area: featured;
}

.common-usecase-cards__item--secondary {
    grid-area: secondary;
}

.common-usecase-cards__item--tertiary {
    grid-area: tertiary;
}

.common-usecase-cards__card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 18px;
    border: 1px solid #cf8100;
    background: #fef9ef;
    box-shadow: 0 18px 36px rgba(90, 81, 66, 0.045);
    overflow: hidden;
    text-decoration: none;
    
}

.common-usecase-cards__card-image-wrap {
    margin: 0;
    aspect-ratio: 3 / 2;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.common-usecase-cards__card-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.common-usecase-cards__card-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.common-usecase-cards__card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.common-usecase-cards__card-cta {
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #131A1C;
}

.common-usecase-cards__card-cta-icon {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.common-usecase-cards__card-title {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem!important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.common-usecase-cards__card-lead {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    color: #5b5751;
}

.common-usecase-cards__card-tags {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.common-usecase-cards__card-tag {
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: rgba(207, 129, 0, 1);
}

.common-usecase-cards__card--placeholder {
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.common-usecase-cards__card-placeholder-text {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #9c907e;
}

.common-usecase-cards__accent {
    display: none;
}

.common-usecase-cards__masonry {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(216, 227, 232, 0.92);
    background: linear-gradient(90deg, #151716 0%, #2A2518 62.98%, #594416 100%);
    box-shadow: 0 13px 28px -10px rgba(16, 58, 99, 0.085);
    overflow: hidden;
    padding: 24px 20px;
}

.common-usecase-cards__accent-circle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 18px;
}

.common-usecase-cards__accent-outer {
    position: relative;
    width: min(230px, 60vw);
    height: min(230px, 60vw);
    border: 2px solid #f2a15f;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.common-usecase-cards__accent-outer::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(90deg, #F28A5F 0%, #FFE346 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.common-usecase-cards__accent-inner {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: linear-gradient(90deg, #F28A5F 0%, #FFE346 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans", "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    
    letter-spacing: 0.02em;
}

.common-usecase-cards__masonry-content {
    position: relative;
    z-index: 1;
}

.common-usecase-cards__masonry-title {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #fffdf8;
}

.common-usecase-cards__masonry-copy {
    margin: 12px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1px;
    color: #ede5d0;
}

@media (min-width: 960px) {
    .common-usecase-cards {
        margin-top: 32px;
        grid-template-areas: none;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 27px 24px;
        align-items: stretch;
    }

    .common-usecase-cards__item--featured {
        grid-column: 1 / 9;
        grid-row: 1;
    }

    .common-usecase-cards__accent {
        grid-column: 9 / 13;
        grid-row: 1;
        min-height: 380px;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        gap: 24px;
    }

    .common-usecase-cards__item--secondary {
        grid-column: 1 / 7;
        grid-row: 2;
    }

    .common-usecase-cards__item--tertiary {
        grid-column: 7 / 13;
        grid-row: 2;
    }

    .common-usecase-cards__item--featured .common-usecase-cards__card {
        height: 100%;
    }

    .common-usecase-cards__item--secondary .common-usecase-cards__card,
    .common-usecase-cards__item--tertiary .common-usecase-cards__card {
        height: 100%;
    }

    .common-usecase-cards__item--featured .common-usecase-cards__card-image-wrap {
        width: calc(100% - 32px);
        margin: 16px auto 0;
        border-radius: 14px;
    }

    .common-usecase-cards__item--secondary .common-usecase-cards__card-image-wrap,
    .common-usecase-cards__item--tertiary .common-usecase-cards__card-image-wrap {
        width: calc(100% - 28px);
        min-height: 250px;
        margin: 12px auto 0;
        border-radius: 14px;
    }

    .common-usecase-cards__item--featured .common-usecase-cards__card-content {
        padding: 28px;
        gap: 16px;
    }

    .common-usecase-cards__item--featured .common-usecase-cards__card-title {
        font-size: 28px;
        line-height: 1.35;
    }

    .common-usecase-cards__item--secondary .common-usecase-cards__card-title,
    .common-usecase-cards__item--tertiary .common-usecase-cards__card-title {
        font-size: 24px;
        line-height: 1.35;
    }

    .common-usecase-cards__item--featured .common-usecase-cards__card-lead {
        font-size: 15px;
    }

    .common-usecase-cards__accent-circle {
        position: static;
        justify-self: start;
        align-self: start;
        margin: 20px auto;
    }

    .common-usecase-cards__masonry {
        max-height: 380px;
        min-height: 250px;
        padding: 40px;
        width: 100%;
        justify-self: stretch;
        align-self: start;
    }

    .common-usecase-cards__card-cta {
        width: 50px;
        height: 50px;
    }

    .common-usecase-cards__card-cta-icon {
        width: 26px;
    }

}