/* Zizania Feature Row component */
.zz-feature-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 64rem;
    margin-inline: auto;
}
@media (min-width: 900px) {
    .zz-feature-row {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* Content column */
.zz-feature-row__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    order: 2;
}
@media (min-width: 900px) {
    .zz-feature-row__content { order: 1; }
}
.zz-feature-row__eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--tertiary);
}
.zz-feature-row__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--on-surface);
}
.zz-feature-row__text {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--on-surface);
    opacity: 0.8;
}
.zz-feature-row__text p {
    margin: 0 0 1.25rem;
}
.zz-feature-row__text p:last-child {
    margin-bottom: 0;
}
.zz-feature-row__text h3,
.zz-feature-row__text h4 {
    margin: 1.75rem 0 0.75rem;
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--on-surface);
    opacity: 1;
}
.zz-feature-row__text h3:first-child,
.zz-feature-row__text h4:first-child {
    margin-top: 0;
}

/* Media column */
.zz-feature-row__media {
    position: relative;
    order: 1;
}
@media (min-width: 900px) {
    .zz-feature-row__media { order: 2; }
}
.zz-feature-row__image-frame {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(var(--on-surface-rgb), 0.25);
    aspect-ratio: 3 / 4;
    max-width: 24rem;
    margin-inline: auto;
    transition: transform 500ms ease-in-out;
}
@media (min-width: 900px) {
    .zz-feature-row__image-frame {
        transform: rotate(3deg);
        max-width: 100%;
    }
    .zz-feature-row__image-frame:hover {
        transform: rotate(0deg);
    }
}
.zz-feature-row__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Modifier: image on the left */
@media (min-width: 900px) {
    .zz-feature-row--image-left .zz-feature-row__content { order: 2; }
    .zz-feature-row--image-left .zz-feature-row__media   { order: 1; }
    .zz-feature-row--image-left .zz-feature-row__image-frame {
        transform: rotate(-3deg);
    }
    .zz-feature-row--image-left .zz-feature-row__image-frame:hover {
        transform: rotate(0deg);
    }
}