.editorial-section {
    padding-block: clamp(5.5rem, 9vw, 8.5rem);
    font-family:
        var(--font-latin),
        var(--font-cjk-primary),
        var(--font-cjk-secondary),
        system-ui,
        sans-serif;
}

.editorial-section--style-flat {
    background-color: rgb(255, 255, 255);
}

.editorial-section--style-block {
    background-color: rgb(246, 245, 242);
}

.editorial-section__container {
    max-width: 81.5rem;
}

.editorial-section__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 30rem);
    align-items: baseline;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(3.25rem, 6vw, 5rem);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgb(199, 199, 196);
}

.editorial-section__title,
.editorial-section__intro {
    margin: 0;
}

.editorial-section__title {
    font-family: var(--font-latin), sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 500;
    letter-spacing: clamp(0.25rem, 0.8vw, 0.625rem);
    line-height: 1.5;
}

.editorial-section__intro {
    justify-self: end;
    color: rgb(91, 91, 91);
    font-family:
        var(--font-cjk-primary),
        var(--font-cjk-secondary),
        sans-serif;
    font-size: 0.9375rem;
    line-height: 1.8;
    text-align: right;
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(var(--editorial-columns, 2), minmax(0, 1fr));
    gap: clamp(3.75rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

.editorial-grid[data-columns="2"] {
    --editorial-columns: 2;
}

.editorial-grid[data-columns="3"] {
    --editorial-columns: 3;
}

.editorial-card {
    min-width: 0;
}

.editorial-card__media {
    display: block;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: rgb(226, 226, 223);
    color: inherit;
}

.editorial-grid[data-ratio="4-3"] .editorial-card__media {
    aspect-ratio: 4 / 3;
}

.editorial-grid[data-ratio="3-2"] .editorial-card__media {
    aspect-ratio: 3 / 2;
}

.editorial-grid[data-ratio="16-9"] .editorial-card__media {
    aspect-ratio: 16 / 9;
}

.editorial-grid[data-ratio="1-1"] .editorial-card__media {
    aspect-ratio: 1 / 1;
}

.editorial-card__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position:
        var(--editorial-focal-x, 50%)
        var(--editorial-focal-y, 50%);
    transition:
        opacity 0.45s cubic-bezier(0.3, 0.1, 0.58, 1),
        transform 0.6s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.editorial-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 52%),
        rgb(211, 209, 203);
}

.editorial-card__media:focus-visible .editorial-card__image {
    opacity: 0.88;
    transform: scale(1.018);
}

@media (hover: hover) {
    .editorial-card__media:hover .editorial-card__image {
        opacity: 0.88;
        transform: scale(1.018);
    }
}

.editorial-card__media:focus-visible {
    outline: 2px solid rgb(17, 17, 17);
    outline-offset: 0.3rem;
}

.editorial-card__body {
    max-width: 34rem;
    padding-top: 1.375rem;
}

.editorial-card__meta {
    margin: 0 0 0.875rem;
    color: rgb(112, 112, 112);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.stories-section .editorial-card__meta {
    letter-spacing: 0.035em;
}

.editorial-card__title {
    margin: 0;
    color: rgb(17, 17, 17);
    font-family:
        var(--font-cjk-primary),
        var(--font-cjk-secondary),
        sans-serif;
    font-size: clamp(1.25rem, 1.65vw, 1.5rem);
    font-weight: 500;
    line-height: 1.55;
}

.editorial-grid[data-columns="2"] .editorial-card__title {
    font-size: clamp(1.3125rem, 2vw, 1.625rem);
}

.editorial-card__summary {
    margin: 1rem 0 0;
    color: rgb(84, 84, 84);
    font-family:
        var(--font-cjk-primary),
        var(--font-cjk-secondary),
        sans-serif;
    font-size: 0.9375rem;
    line-height: 1.85;
}

html:lang(ko) .editorial-card__title,
html:lang(ko) .editorial-card__summary,
html:lang(ko) .editorial-section__intro {
    overflow-wrap: break-word;
    word-break: keep-all;
}

html:lang(ja) .editorial-card__title,
html:lang(ja) .editorial-card__summary,
html:lang(ja) .editorial-section__intro {
    overflow-wrap: anywhere;
    line-break: strict;
    word-break: normal;
}

.editorial-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: transparent;
    color: rgb(17, 17, 17);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-decoration: none;
}

a.editorial-cta:link,
a.editorial-cta:visited,
a.editorial-cta:hover,
a.editorial-cta:focus,
a.editorial-cta:active {
    background-color: transparent;
    color: rgb(17, 17, 17);
    text-decoration: none;
}

a.editorial-cta:focus-visible {
    outline: 2px solid rgb(17, 17, 17);
    outline-offset: 0.25rem;
}

.editorial-section__cta-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.editorial-section__cta:hover .editorial-section__cta-arrow,
a.editorial-section__cta:focus-visible .editorial-section__cta-arrow {
    transform: translateX(0.35rem);
}

.editorial-card__cta {
    margin-top: 1.625rem;
    font-family: var(--font-latin), sans-serif;
    letter-spacing: 0.08em;
}

.editorial-grid[data-card-style="block"] {
    align-items: stretch;
}

.editorial-grid[data-card-style="block"] .editorial-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: rgb(255, 255, 255);
}

.editorial-grid[data-card-style="block"] .editorial-card__media {
    flex: 0 0 auto;
    border-radius: 0.5rem 0.5rem 0 0;
}

.editorial-grid[data-card-style="block"] .editorial-card__body {
    display: flex;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.375rem 1.5rem 1.5rem;
}

.editorial-grid[data-card-style="block"] .editorial-card__cta {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1.625rem;
}

.editorial-card__cta--pending,
.editorial-section__cta--pending {
    cursor: default;
}

.editorial-section__footer {
    margin-top: clamp(3.75rem, 6vw, 5.5rem);
    text-align: center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .editorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .editorial-section__header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .editorial-section__intro {
        justify-self: start;
        max-width: 32rem;
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    .editorial-section {
        padding-block: 5rem;
    }

    .editorial-section__header {
        align-items: start;
        margin-bottom: 3rem;
    }

    .editorial-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3.75rem;
    }

    .editorial-card__title,
    .editorial-grid[data-columns="2"] .editorial-card__title {
        font-size: 1.3125rem;
    }

    .editorial-grid[data-card-style="block"] .editorial-card__body {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-card__image,
    .editorial-section__cta-arrow {
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    .editorial-card__media:hover .editorial-card__image,
    .editorial-card__media:focus-visible .editorial-card__image {
        transform: none;
    }

    .editorial-section__cta:hover .editorial-section__cta-arrow,
    a.editorial-section__cta:focus-visible .editorial-section__cta-arrow {
        transform: none;
    }
}