/* What ZEN.COM is: the left-aligned head 90px under the claim band, the three 443 cards 41px under it
   (gap 30), each 636 tall at least: title 24px in, the description 24 under it (two lines kept), the 205 photo
   16 under it across the card, the points 16 under the photo, 32px of card under them */
.ltb-features {
    padding-top: 90px;
}

.ltb-features__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ltb-page .ltb-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 30px;
    width: min(1390px, 100% - 48px);
    margin: 41px auto 0;
    padding: 0;
    list-style: none;
}

.ltb-page .ltb-feature {
    min-height: 636px;
    margin: 0;
    padding: 24px 0 32px;
    box-sizing: border-box;
    border-radius: 24px;
    background: #fff;
}

.ltb-feature::before,
.ltb-feature::marker {
    content: none;
}

.ltb-page .ltb-feature__title {
    margin: 0 32px;
    color: var(--ltb-jet);
    font-size: 40px;
    font-style: italic;
    font-weight: 900;
    line-height: 38px;
    text-transform: uppercase;
}

.ltb-page .ltb-feature__desc {
    max-width: 280px;
    min-height: 44px;
    margin: 24px 32px 0;
    color: var(--ltb-ash);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.ltb-feature__media {
    display: block;
    aspect-ratio: 443 / 205;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 12px;
}

.ltb-feature__img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.ltb-page .ltb-feature__points {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 32px 0;
    padding: 0;
    list-style: none;
}

.ltb-page .ltb-feature__point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ltb-regular-beige);
}

.ltb-page .ltb-feature__point:first-child {
    border-top: 0;
}

.ltb-feature__point::before,
.ltb-feature__point::marker {
    content: none;
}

.ltb-feature__check {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
}

.ltb-feature__text {
    flex: 1 1 0;
    min-width: 0;
    color: var(--ltb-jet);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

/* narrower desktops: the three cards stay in a row, their copy 24px in */
@media (max-width: 1199px) and (min-width: 1024px) {
    .ltb-page .ltb-features__grid {
        gap: 20px;
    }

    .ltb-page .ltb-feature__title {
        margin: 0 24px;
    }

    .ltb-page .ltb-feature__desc {
        margin: 24px 24px 0;
    }

    .ltb-page .ltb-feature__points {
        margin: 16px 24px 0;
    }
}

/* tablets: the cards stacked, each one a row - the copy and the points on the left, the photo filling the right half */
@media (max-width: 1023px) and (min-width: 768px) {
    .ltb-features {
        padding-top: 64px;
    }

    .ltb-page .ltb-features__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: 40px;
    }

    .ltb-page .ltb-feature {
        display: grid;
        grid-template-areas:
            "title media"
            "desc media"
            "points media";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 32px;
        min-height: 0;
        padding: 24px 0 32px;
        overflow: hidden;
    }

    .ltb-feature__title {
        grid-area: title;
    }

    .ltb-feature__desc {
        grid-area: desc;
    }

    .ltb-page .ltb-feature__points {
        grid-area: points;
        margin-right: 0;
    }

    .ltb-feature__media {
        grid-area: media;
        aspect-ratio: auto;
        margin: -24px 0 -32px;
        border-radius: 0;
    }

    .ltb-page .ltb-feature__title,
    .ltb-page .ltb-feature__desc {
        margin-right: 0;
    }
}

/* phones (440 frame): the head 40px in, the 408 cards stacked 24 apart, 32px under the head, 24px in */
@media (max-width: 767px) {
    .ltb-features {
        padding-top: 40px;
    }

    .ltb-features .ltb-container {
        padding: 0 40px;
    }

    .ltb-page .ltb-features__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        width: auto;
        margin: 32px 16px 0;
    }

    .ltb-page .ltb-feature {
        min-height: 0;
        padding-bottom: 24px;
    }

    .ltb-feature__media {
        aspect-ratio: 408 / 205;
    }

    .ltb-page .ltb-feature__title {
        margin: 0 24px;
    }

    .ltb-page .ltb-feature__desc {
        margin: 24px 24px 0;
    }

    .ltb-page .ltb-feature__points {
        margin: 16px 24px 0;
    }
}

/* the checks pop in one after another once the card is in view; the photo zooms in a little on hover */
.ltb-anim .ltb-feature__check {
    transform: scale(0);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--ltb-delay, 0ms) + .3s + var(--ltb-i, 0) * .1s);
}

.ltb-feature__point:nth-child(2) {
    --ltb-i: 1;
}

.ltb-feature__point:nth-child(3) {
    --ltb-i: 2;
}

.ltb-anim .is-inview .ltb-feature__check {
    transform: none;
}

.ltb-feature__img {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
    .ltb-feature:hover .ltb-feature__img {
        transform: scale(1.03);
    }
}