.other-fabrics-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & > h2 {
        margin: 0;
        font-size: var(--fs-lg);
        line-height: 0.95;
        letter-spacing: -0.02em;
    }

    .fabric-grid {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
        flex-wrap: nowrap;
    }

    .fabric-card {
        position: relative;
        flex: 2 1 0;
        min-width: 0;
        min-height: clamp(24rem, 60vh, 40rem);
        overflow: hidden;
        margin: 0;
        --other-fabric-scale: 1.02;
        border-radius: var(--space-sm);
        border-radius: var(--space-sm);
    }

    .fabric-card__media {
        position: absolute;
        inset: 0;
        overflow: hidden;
        --other-fabric-hover-scale: 1;
        transform: translate3d(0, var(--other-fabric-parallax-y, 0px), 0)
            scale(calc((var(--other-fabric-scale) + var(--other-fabric-parallax-scale, 0)) * var(--other-fabric-hover-scale)));
        transform-origin: center;
        transition: transform 3000ms var(--out);
        will-change: transform;
    }

    .fabric-card__media-viewport {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .fabric-card__media-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        touch-action: pan-x pinch-zoom;
    }
    
    .fabric-card__media-slide {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        min-height: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .fabric-card__kitchens {
        position: absolute;
        top: var(--space-sm);
        left: var(--space-sm);
        z-index: 1;
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);

        & li {
            margin: 0;
        }

        & a {
            display: inline-block;
            background-color: transparent;
            color: var(--jet-black);
            max-width: 0;
            opacity: 0;
            transform: translateX(-0.75rem) scaleX(0.96);
            overflow: hidden;
            white-space: nowrap;
            pointer-events: none;
            transition: opacity 360ms var(--out), transform 360ms var(--out), color 360ms var(--out), background-color 360ms var(--out);
            transition-delay: calc((var(--kitchen-count) - var(--kitchen-index)) * 48ms);
        }

        & a:hover,
        & a:focus-visible,
        & a.is-active {
            color: var(--the-white);
            background-color: var(--jet-black);
            opacity: 1;
        }

        & a.internal-link::after {
            opacity: 0;
            transform: translateX(-0.2em);
            transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);
        }

        & a.internal-link:hover::after,
        & a.internal-link:focus-visible::after,
        & a.internal-link.is-active::after {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .fabric-card__caption {
        position: absolute;
        z-index: 1;
        left: var(--space-sm);
        bottom: var(--space-sm);
        border-radius: var(--space-xs);
        font-size: var(--fs-md);
        margin: 0;

        & a {
            display: inline-flex;
            align-items: center;
            min-height: var(--tap-target-size);
            color: var(--the-white);
            background-color: var(--jet-black);
            padding-inline: var(--space-sm);
        }

        & a::after {
            content: " \2192";
            margin-left: 0.35em;
            opacity: 0;
            transform: translateX(-0.2em);
            transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);
        }

        & a:hover::after,
        & a:focus-visible::after {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .fabric-card:hover,
    .fabric-card:focus-within {
        & .fabric-card__kitchens a {
            max-width: 24rem;
            padding: var(--space-xs);
            opacity: 0.85;
            transform: translateX(0) scaleX(1);
            pointer-events: auto;
            transition-delay: calc(var(--kitchen-index) * 46ms);
        }

        & .fabric-card__kitchens a.is-active {
            opacity: 1;
        }

        & .fabric-card__media {
            --other-fabric-hover-scale: 1.06;
        }
    }
}

@media (max-width: 960px) {
    .other-fabrics-section {
        & .fabric-grid {
            flex-direction: column;
        }

        & .fabric-card {
            width: 100%;
            min-height: clamp(20rem, 45vh, 26rem);
        }
    }
}

@media (max-width: 64rem) {
    .other-fabrics-section {
        & .fabric-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: var(--space-xl);
        }

        & .fabric-card {
            min-height: clamp(60vh, 75vh, 90vh);
        }

        & .fabric-card__kitchens {
            top: var(--space-xs);
            left: var(--space-xs);
            gap: calc(var(--space-xs) * 0.9);
        }

        & .fabric-card__kitchens a {
            max-width: 16rem;
            min-height: var(--tap-target-size);
            opacity: 0.92;
            transform: translateX(0) scaleX(1);
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: auto;
            color: var(--the-white);
            background-color: var(--jet-black);
            display: inline-flex;
            align-items: center;
            padding-inline: var(--space-xs);
        }

        & .fabric-card__kitchens a:hover,
        & .fabric-card__kitchens a:focus-visible,
        & .fabric-card__kitchens a.is-active {
            color: var(--jet-black);
            background-color: var(--the-white);
            opacity: 1;
        }

        & .fabric-card__caption {
            left: var(--space-xs);
            bottom: var(--space-xs);
        }

        & .fabric-card__caption a {
            min-height: var(--tap-target-size);
            padding-inline: var(--space-xs);
        }

        & .fabric-card:hover .fabric-card__media,
        & .fabric-card:focus-within .fabric-card__media {
            --other-fabric-hover-scale: 1.02;
        }
    }
}

@media (max-width: 48rem) {
    .other-fabrics-section {
        padding-inline: var(--space-sm);
        box-sizing: border-box;

        & > h2 {
            margin-top: var(--space-xl);
            padding-inline: 0;
        }

        & .fabric-grid {
            grid-template-columns: 1fr;
            width: 100%;
            margin-inline: 0;
            gap: var(--space-md);
        }

        & .fabric-card {
            min-height: clamp(80vh, 85svh, 95vh);
        }

        & .fabric-card__kitchens a {
            max-width: 100%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .other-fabrics-section {
        & .fabric-card__media,
        & .fabric-card__kitchens a,
        & .fabric-card__caption a::after {
            transition-duration: 0ms;
        }
    }
}