.sustainability_carousel_wrap {
    position: relative;
    width: 63.54vw;
    max-width: 1220px;
    aspect-ratio: 1220 / 664;
    max-height: 664px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    overflow-x: clip;
    overflow-y: visible;
    padding: 0;
}

.sustainability_carousel_view {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sustainability_carousel {
    --carousel-gap: min(1.458vw, 28px);
    --center-card-width: calc(((100% - 1.0417vw) - (var(--carousel-gap) * 2)) / 2.36);
    --side-card-width: calc(var(--center-card-width) * 0.68);

    display: flex;
    align-items: center;
    gap: var(--carousel-gap);
    height: 100%;
    transition: transform 800ms cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    position: relative;
    left: 0.5208vw;
}

.sustainability_carousel > .sustainability_card {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--side-card-width);
    opacity: 0;
    z-index: 0;
    transition:
        width 800ms cubic-bezier(.22, .61, .36, 1),
        opacity 800ms cubic-bezier(.22, .61, .36, 1),
        filter 800ms cubic-bezier(.22, .61, .36, 1);
}

.sustainability_carousel > .sustainability_card.is-main-center {
    width: var(--center-card-width);
    opacity: 1;
    z-index: 2;
    align-items: flex-start;
}

.sustainability_carousel > .sustainability_card.is-side-left,
.sustainability_carousel > .sustainability_card.is-side-right {
    width: var(--side-card-width);
    opacity: 0.9;
    z-index: 1;
    align-items: center;
}

.sustainability_card_inner {
    border-radius: 28px;
    width: 100%;
    aspect-ratio: 500 / 664;
    min-height: 0;
    height: auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    transform-origin: center center;
    transition:
        padding 800ms cubic-bezier(.22, .61, .36, 1),
        transform 800ms cubic-bezier(.22, .61, .36, 1),
        opacity 800ms cubic-bezier(.22, .61, .36, 1);
}

.sustainability_carousel > .sustainability_card.is-main-center .sustainability_card_inner {
    aspect-ratio: 500 / 664;
}

.sustainability_carousel > .sustainability_card.is-side-left .sustainability_card_inner,
.sustainability_carousel > .sustainability_card.is-side-right .sustainability_card_inner {
    aspect-ratio: 500 / 664;
}

.sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap {
    width: calc(100% / 0.68);
    padding: min(7.8vw, 150px) 0;
    box-sizing: border-box;
    transform: scale(0.68);
    transform-origin: left top;
    transition:
        transform 800ms cubic-bezier(.22, .61, .36, 1),
        width 800ms cubic-bezier(.22, .61, .36, 1),
        padding 800ms cubic-bezier(.22, .61, .36, 1);
}

.sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap .textarea {
    width: calc(100% / 0.68);
}

.sustainability_carousel > .sustainability_card.is-main-center .sustainability_card_inner .card_wrap {
    width: 100%;
    transform: scale(1);
    transform-origin: left top;
}

.sustainability_carousel > .sustainability_card.is-side-left .sustainability_card_inner .card_wrap,
.sustainability_carousel > .sustainability_card.is-side-right .sustainability_card_inner .card_wrap {
    width: calc(100% / 0.68);
    transform: scale(0.68);
    transform-origin: left top;
}

.sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap .button {
    transition: opacity 800ms cubic-bezier(.22, .61, .36, 1);
}

.sustainability_carousel > .sustainability_card.is-main-center .sustainability_card_inner .card_wrap .button {
    opacity: 1;
    pointer-events: auto;
}

.sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap .button {
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 834px) {
    .sustainability_carousel_wrap {
        width: 100%;
        min-width: 180vw;
        margin: 0;
        overflow-x: hidden;
    }
    
    .sustainability_carousel {
        --carousel-gap: 5vw;
    }
    
    .sustainability_card_inner {
        border-radius: 5vw;
    }

    .sustainability_carousel > .sustainability_card .sustainability_card_inner .titlearea {
        height: 30vw;
    }

    .sustainability_carousel > .sustainability_card .sustainability_card_inner .cardtext {
        padding-left: 5vw;
        padding-right: 5vw;
        height: 35vw;
    }
    
    .sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap {
        height: 100%;
        justify-content: space-between;
    }
    
    .sustainability_carousel > .sustainability_card .sustainability_card_inner .card_wrap .button {
        padding: 0 5vw;
    }
}