.carousel-intro {
    background: var(--white);
    padding: 120px 0 105px;
}

.carousel-intro__inner {
    max-width: 850px;
}

.carousel-intro h2 {
    font-size: 54px;
    letter-spacing: -.045em;
    line-height: 1;
    margin: 0;
}

.carousel-intro__inner .prose {
    margin-top: 38px;
    max-width: 760px;
}

.carousel-intro__inner .prose p {
    font-size: 22px;
    line-height: 1.45;
}

.carousel-intro__statement {
    border-top: 1px solid rgba(36, 31, 32, .22);
    margin-top: 80px;
    padding-top: 48px;
}

.carousel-intro__statement p {
    font-size: 22px;
    line-height: 1.45;
    margin: 0 0 12px;
    max-width: 940px;
}

.carousel-intro__standout {
    border-bottom: 1px solid rgba(36, 31, 32, .28);
    color: var(--violet);
    font-size: 34px !important;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2 !important;
    margin-bottom: 34px !important;
    padding: 0 0 28px;
}

.story-carousel {
    background: var(--paper);
    overflow: hidden;
    padding: 105px 0 125px;
}

.story-carousel__controls-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 28px;
}

.story-carousel__controls {
    align-items: center;
    display: flex;
    gap: 16px;
}

.story-carousel__button {
    align-items: center;
    background: var(--night);
    border: 0;
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    font: 700 24px/1 "Outfit", Arial, sans-serif;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.story-carousel__button:hover,
.story-carousel__button:focus-visible {
    background: var(--violet);
}

.story-carousel__button:disabled {
    cursor: default;
    opacity: .3;
}

.story-carousel__status {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    min-width: 52px;
    text-align: center;
}

.story-carousel__viewport {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    overflow: hidden;
}

.story-carousel__track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.story-card {
    background: var(--white);
    box-shadow: 0 18px 55px rgba(36, 31, 32, .1);
    display: flex;
    flex: 0 0 76%;
    min-height: 660px;
    opacity: .48;
    transform: scale(.97);
    transition: opacity .35s ease, transform .35s ease;
}

.story-card.is-active {
    opacity: 1;
    transform: scale(1);
}

.story-card__visual,
.story-card__content {
    flex: 1 1 50%;
}

.story-card__visual {
    align-items: flex-end;
    display: flex;
    min-height: 660px;
    overflow: hidden;
    padding: 32px;
    position: relative;
}

.story-card--guardians .story-card__visual {
    background: var(--seafoam);
}

.story-card--cdc .story-card__visual {
    background: var(--sunrise);
}

.story-card--mountain .story-card__visual {
    background: var(--ocean);
}

.story-card__visual-label {
    background: var(--night);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 9px 12px;
    position: relative;
    text-transform: uppercase;
    z-index: 3;
}

.story-card__collage span {
    background: var(--white);
    box-shadow: 0 20px 50px rgba(36, 31, 32, .22);
    position: absolute;
}

.story-card__collage span:before,
.story-card__collage span:after {
    content: "";
    position: absolute;
}

.story-card__collage span:before {
    background: var(--night);
    height: 18%;
    left: 9%;
    top: 10%;
    width: 54%;
}

.story-card__collage span:after {
    background: var(--violet);
    bottom: 10%;
    height: 25%;
    right: 9%;
    width: 42%;
}

.story-card__collage--guardians span:nth-child(1) {
    height: 315px;
    left: 8%;
    top: 12%;
    transform: rotate(-4deg);
    width: 64%;
}

.story-card__collage--guardians span:nth-child(2) {
    height: 230px;
    right: 8%;
    top: 32%;
    transform: rotate(5deg);
    width: 36%;
}

.story-card__collage--guardians span:nth-child(3) {
    bottom: 12%;
    height: 165px;
    left: 19%;
    transform: rotate(3deg);
    width: 34%;
}

.story-card__collage--cdc span:nth-child(1) {
    height: 235px;
    left: 8%;
    top: 9%;
    transform: rotate(-7deg);
    width: 36%;
}

.story-card__collage--cdc span:nth-child(2) {
    height: 285px;
    left: 34%;
    top: 23%;
    transform: rotate(3deg);
    width: 38%;
}

.story-card__collage--cdc span:nth-child(3) {
    height: 210px;
    right: 7%;
    top: 10%;
    transform: rotate(8deg);
    width: 29%;
}

.story-card__collage--cdc span:nth-child(4) {
    bottom: 9%;
    height: 155px;
    left: 14%;
    transform: rotate(4deg);
    width: 29%;
}

.story-card__collage--mountain span:nth-child(1) {
    height: 330px;
    left: 9%;
    top: 10%;
    transform: rotate(-3deg);
    width: 61%;
}

.story-card__collage--mountain span:nth-child(2) {
    height: 205px;
    right: 8%;
    top: 36%;
    transform: rotate(6deg);
    width: 33%;
}

.story-card__collage--mountain span:nth-child(3) {
    bottom: 9%;
    height: 150px;
    left: 21%;
    transform: rotate(3deg);
    width: 32%;
}

.story-card__content {
    padding: 54px;
}

.story-card__index {
    color: var(--ocean);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    margin-bottom: 24px;
}

.story-card__content h2 {
    font-size: 40px;
    letter-spacing: -.04em;
    line-height: 1.02;
    margin: 0 0 10px;
}

.story-card__content h3 {
    color: var(--violet);
    font-size: 23px;
    line-height: 1.2;
    margin: 0 0 27px;
}

.story-card__content p {
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 16px;
}

.story-card__content blockquote {
    border-left: 4px solid var(--seafoam);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.42;
    margin: 28px 0 10px;
    padding-left: 20px;
}

.story-card--cdc blockquote {
    border-left-color: var(--sunrise);
}

.story-card--mountain blockquote {
    border-left-color: var(--ocean);
}

.story-card__content cite {
    display: block;
    font-size: 13px;
    font-style: normal;
    margin-bottom: 31px;
}

.story-card__result {
    border-top: 1px solid rgba(36, 31, 32, .24);
    display: block;
    font-size: 29px;
    letter-spacing: -.025em;
    line-height: 1.12;
    padding-top: 25px;
}

.story-carousel__dots {
    display: flex;
    gap: 9px;
    margin-top: 34px;
}

.story-carousel__dots button {
    background: rgba(36, 31, 32, .22);
    border: 0;
    cursor: pointer;
    height: 5px;
    padding: 0;
    transition: background .2s ease, width .2s ease;
    width: 34px;
}

.story-carousel__dots button[aria-current="true"] {
    background: var(--night);
    width: 68px;
}

.carousel-gratitude {
    background: var(--night);
    color: var(--white);
    padding: 120px 0;
    text-align: center;
}

.carousel-gratitude__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.carousel-gratitude p {
    color: var(--seafoam);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
}

.carousel-gratitude h2 {
    font-size: 54px;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin: 0;
}

@media (max-width: 1000px) {
    .story-card {
        flex-basis: 84%;
    }

    .story-card__content {
        padding: 40px;
    }

    .story-card__content h2 {
        font-size: 34px;
    }
}

@media (max-width: 760px) {
    .carousel-intro,
    .story-carousel,
    .carousel-gratitude {
        padding: 80px 0;
    }

    .carousel-intro h2 {
        font-size: 40px;
    }

    .carousel-intro__statement {
        margin-top: 55px;
        padding-top: 32px;
    }

    .carousel-intro__statement p,
    .carousel-intro__inner .prose p {
        font-size: 20px;
    }

    .carousel-intro__standout {
        font-size: 29px !important;
    }

    .story-carousel__controls-row {
        justify-content: flex-start;
        margin-bottom: 24px;
    }

    .story-carousel__controls {
        justify-content: flex-start;
    }

    .story-card {
        flex-basis: 92%;
        flex-direction: column;
        min-height: 0;
    }

    .story-card__visual,
    .story-card__content {
        flex-basis: auto;
        width: 100%;
    }

    .story-card__visual {
        min-height: 385px;
    }

    .story-card__content {
        padding: 34px 27px;
    }

    .story-card__content h2 {
        font-size: 33px;
    }

    .story-card__result {
        font-size: 25px;
    }

    .story-carousel__dots {
        padding-left: 22px;
        padding-right: 22px;
    }

    .carousel-gratitude h2 {
        font-size: 39px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-carousel__track,
    .story-card,
    .story-carousel__dots button {
        transition: none;
    }
}