/**
 * Image Editorial Component
 */

.c-image-editorial {
    width: 100%;
    max-width: var(--c-image-editorial-max-width, 64em);
    margin: 0 auto;
    padding-bottom: var(--c-image-editorial-padding-bottom, 10em);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-image-editorial__body {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--c-image-editorial-images-column-width, 22.5em) minmax(0, 1fr);
    gap: var(--c-image-editorial-body-gap, 4.5em);
    align-items: center;
}

.c-image-editorial__header {
    display: contents;
}

.c-image-editorial__eyebrow {
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: var(--c-image-editorial-eyebrow-margin-bottom, 6.875em);
}

.c-image-editorial--side-text .c-image-editorial__body {
    grid-template-areas:
        "eyebrow eyebrow eyebrow"
        "title images content"
        "button button button";
    column-gap: var(--c-image-editorial-body-gap, 6.25em);
    row-gap: 0;
}

.c-image-editorial--side-text .c-image-editorial__eyebrow {
    grid-area: eyebrow;
}

.c-image-editorial--side-text .c-image-editorial__title-wrap {
    grid-area: title;
    align-self: center;
}

.c-image-editorial--side-text .c-image-editorial__images {
    grid-area: images;
}

.c-image-editorial--side-text .c-image-editorial__content {
    grid-area: content;
    align-self: center;
}

.c-image-editorial--side-text .c-image-editorial__button {
    grid-area: button;
    justify-self: center;
    margin-top: var(--c-image-editorial-button-margin-top, 6.875em);
}

.c-image-editorial--stacked-text .c-image-editorial__body {
    max-width: var(--c-image-editorial-stacked-max-width, 40em);
    display: flex;
    flex-direction: column;
    gap: var(--c-image-editorial-stacked-section-gap, 5em);
    align-items: center;
    text-align: center;
}

.c-image-editorial--stacked-text .c-image-editorial__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--c-image-editorial-stacked-header-gap, 1.375em);
}

.c-image-editorial--stacked-text .c-image-editorial__eyebrow,
.c-image-editorial--stacked-text .c-image-editorial__button {
    margin: 0;
}

.c-image-editorial--stacked-text .c-image-editorial__title-wrap {
    width: min(100%, 30em);
    justify-content: center;
}

.c-image-editorial--stacked-text .c-image-editorial__title {
    width: 100%;
    text-align: center;
}

.c-image-editorial--stacked-text .c-image-editorial__content {
    justify-content: center;
}

.c-image-editorial--stacked-text .c-image-editorial__description {
    text-align: center;
}

.c-image-editorial__title-wrap {
    grid-column: 1;
    display: flex;
    justify-content: var(--c-image-editorial-title-justify, flex-end);
}

.c-image-editorial__title {
    width: var(--c-image-editorial-title-width, 16em);
    margin: 0;
    text-align: end;
}

.c-image-editorial__images {
    grid-column: 2;
    width: var(--c-image-editorial-images-width, 22.5em);
    height: var(--c-image-editorial-images-height, 28.125em);
    position: relative;
    justify-self: center;
}

.c-image-editorial__figure {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: var(--z-index);
    transform: rotate(var(--rotation)) translateY(calc((var(--z-index) - 1) * -0.15em));
    transform-origin: center center;
    overflow: hidden;
    border-radius: 0.375em;
}

.c-image-editorial__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375em;
}

.c-image-editorial__content {
    display: flex;
    justify-content: var(--c-image-editorial-content-justify, flex-start);
}

.c-image-editorial__description {
    max-width: var(--c-image-editorial-description-max-width, 25.625em);
    margin: 0;
    text-align: left;
}

.c-image-editorial__button {
    margin-top: var(--c-image-editorial-button-margin-top, 4.75em);
}

@media screen and (max-width: 1024px) {
    .c-image-editorial {
        --c-image-editorial-eyebrow-margin-bottom: 1.3em;
        --c-image-editorial-body-gap: 3em;
        --c-image-editorial-images-column-width: 12em;
        --c-image-editorial-images-width: 12em;
        --c-image-editorial-images-height: 15em;
        --c-image-editorial-mobile-body-max-width: 18em;
        --c-image-editorial-title-justify: center;
        --c-image-editorial-content-justify: center;
        --c-image-editorial-stacked-section-gap: 3.875em;
        --c-image-editorial-stacked-header-gap: 1.25em;
        --c-image-editorial-button-margin-top: 2.75em;
        --c-image-editorial-padding-bottom: 5em;
    }

    .c-image-editorial__body,
    .c-image-editorial--side-text .c-image-editorial__body {
        max-width: var(--c-image-editorial-mobile-body-max-width, 40em);
        display: flex;
        flex-direction: column;
        gap: var(--c-image-editorial-body-gap, 3em);
        align-items: center;
        text-align: center;
    }

    .c-image-editorial--stacked-text .c-image-editorial__body {
        max-width: var(--c-image-editorial-mobile-body-max-width, 40em);
        display: flex;
        flex-direction: column;
        gap: var(--c-image-editorial-stacked-section-gap, 3.875em);
        align-items: center;
        text-align: center;
    }

    .c-image-editorial__header,
    .c-image-editorial--side-text .c-image-editorial__header,
    .c-image-editorial--stacked-text .c-image-editorial__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--c-image-editorial-stacked-header-gap, 1.25em);
    }

    .c-image-editorial__eyebrow,
    .c-image-editorial__button,
    .c-image-editorial--side-text .c-image-editorial__button {
        margin: 0;
    }

    .c-image-editorial__title-wrap,
    .c-image-editorial__content {
        width: 100%;
    }

    .c-image-editorial__title {
        width: min(100%, var(--c-image-editorial-title-width, 16em));
        text-align: center;
    }

    .c-image-editorial__description {
        text-align: center;
    }
}