/* Feature page-specific styles. */

.features-listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--gap-n);
    row-gap: calc(var(--bodytext-lineheight) * 2);
    align-items: start;

    @media (max-width: 50rem) {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
}

.features-listing__group-title {
    grid-column: 1 / -1;
    border-width: 0;
    border-style: solid;
    font-size: var(--h2-fontsize);
    line-height: var(--h2-lineheight);
    font-family: var(--h2-fontfamily);
    font-weight: var(--h2-fontweight);
    letter-spacing: 0;
    margin: 0;
}

.features-listing__group-title:not(:first-child) {
    border-top-width: var(--border-width);
    padding-top: calc(var(--bodytext-lineheight) * 2);

    @media (max-width: 50rem) {
        margin-top: calc(var(--bodytext-lineheight) * 2);
    }
}

.features-listing__title {
    grid-column: 1;
    font-size: var(--bodytext-fontsize);
    line-height: var(--bodytext-lineheight);
    font-family: var(--bodytext-fontfamily);
    font-weight: 600;
    letter-spacing: var(--bodytext-letterspacing);
    margin: 0;

    @media (max-width: 50rem) {
        grid-column: auto;
        grid-row: auto;
        margin-top: calc(var(--bodytext-lineheight) * 2);
    }
}

.features-listing__description {
    grid-column: 2;
    margin: 0;

    @media (max-width: 50rem) {
        grid-column: auto;
        grid-row: auto;
    }
}

.features-listing__inline-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--bodytext-fontsize) * 0.38);
    text-decoration: none;
}

.features-listing__inline-icon.icon {
    display: inline-block;
    width: calc(var(--icon-size) * 0.82);
    height: calc(var(--icon-size) * 0.82);
    transform: scale(1.5);
    transform-origin: center;
}

.features-listing__media {
    grid-column: 3;
    align-self: stretch;
    display: grid;
    margin: 0;
    min-height: 10rem;
    overflow: hidden;
    position: relative;
    border-radius: var(--border-radius);

    @media (max-width: 50rem) {
        grid-column: auto;
        grid-row: auto;
    }
}

.features-listing__media--span-2 {
    grid-row: span 2;
}

.features-listing__media--span-3 {
    grid-row: span 3;
}

.features-listing__media > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.features-listing__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 170%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.features-listing__media:after {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to bottom,
            var(--edge-fade-0) 0%,
            var(--edge-fade-0) 50%,
            var(--edge-fade-15) 100%
        ),
        linear-gradient(
            to right,
            var(--edge-fade-0) 0%,
            var(--edge-fade-0) 50%,
            var(--edge-fade-15) 100%
        );
    box-shadow: 0 0 0 var(--border-width) inset var(--edge-multiply-lighten-3);
    pointer-events: none;
    z-index: 2;
}