@layer components {

    .spec {
        width: 100%;
        font-size: var(--t-sm);
    }

    .spec th,
    .spec td {
        padding-block: var(--s-3);
        border-bottom: 1px solid var(--c-line);
        text-align: left;
        vertical-align: top;
    }

    .spec tr:last-child th,
    .spec tr:last-child td {
        border-bottom: 0;
    }

    .spec th {
        width: 34%;
        padding-right: var(--s-4);
        font-weight: 500;
        color: var(--c-ink);
    }

}

@layer components {

    .reasons {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        margin-top: var(--s-10);
        background: var(--c-tile);
    }

    .reasons__media {
        min-height: clamp(360px, 40vw, 640px);
        background: var(--c-tint, var(--c-tile));
    }

    .reasons__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .reasons__body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: center;
        gap: var(--s-7) clamp(32px, 5vw, 88px);
        padding: var(--s-9) clamp(24px, 6vw, 112px);
    }

    .reasons__list {
        display: grid;
        gap: var(--s-3);
        margin-top: var(--s-5);
    }

    .reasons__list li {
        display: flex;
        align-items: baseline;
        gap: var(--s-3);
    }

    .reasons__list .icon {
        position: relative;
        top: 3px;
    }

    .reasons__list--display {
        gap: var(--s-2);
    }

    .reasons__list--display li {
        font-size: var(--t-xl);
        line-height: 1.15;
    }

    @media (max-width: 1023px) {
        .reasons {
            grid-template-columns: minmax(0, 1fr);
        }

        .reasons__media {
            min-height: 0;
            aspect-ratio: 4 / 3;
        }

        .reasons__body {
            grid-template-columns: minmax(0, 1fr);
            padding: var(--s-8) var(--gutter);
        }
    }

}