.esc-stacked-cards {
    min-height: 100vh;
    position: relative;
    overflow: visible;
    padding: 80px 20px;
}

.esc-stacked-cards__viewport {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
}

.esc-stacked-cards__deck {
    position: relative;
    width: min(780px, 92vw);
    height: min(560px, 70vh);
}

.esc-card {
    --tx: -50%;
    --ty: -50%;
    --rot: 0deg;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(400px, 78vw);
    background: #f5f5f5;
    padding: 16px;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.16);
    transform-origin: center center;
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    will-change: transform;
}

.esc-card__media {
    width: 100%;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.esc-card__content {
    padding: 8px;
}

.esc-card__title {
    font-size: 24px;
    font-family: "Space Grotesk", sans-serif !important;
    line-height: 32px;
    font-weight: 400;
    color: #131313;
}

.esc-card__desc {
    font-size: 16px;
    line-height: 24px;
    font-family: "Space Grotesk", sans-serif !important;
    font-weight: 400;
    color: #3A3A3A;
}

.esc-card--left {
    --tx: -90%;
    --ty: -45%;
    --rot: -9deg;
    z-index: 2;
}

.esc-card--center {
    --tx: -50%;
    --ty: -52%;
    --rot: 0deg;
    z-index: 3;
}

.esc-card--right {
    --tx: -10%;
    --ty: -45%;
    --rot: 9deg;
    z-index: 0;
}

@media (max-width: 767px) {
    .esc-stacked-cards {
        padding: 30px 12px;
    }

    .esc-stacked-cards__deck {
        width: 100%;
        height: 84vh;
    }

    .esc-card {
        width: min(390px, 80vw);
    }


    .esc-card--left {
        --tx: -56%;
        --ty: -44%;
        --rot: -6deg;
    }

    .esc-card--center {
        --tx: -50%;
        --ty: -50%;
        --rot: 0deg;
    }

    .esc-card--right {
        --tx: -36%;
        --ty: -45%;
        --rot: 7deg;
    }
}