.fabric-grid {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: 1rem;
    padding: 2rem 0;
    align-items: stretch;
    flex-wrap: nowrap;
    width: var(--the-width);

    .fabric-grid__item {
        display: flex;
        flex-direction: column;
        flex: 2 1 0;
        min-width: 0;
        transition: flex-grow 1000ms var(--out);

        .fabric-card__header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: var(--space-sm);
            text-align: left;
            /* background: var(--the-white); */
            transition: font-size 300ms var(--out);

            h2 {
                display: block;
                width: 100%;
                margin: 0;
                font-size: var(--fs-md);
                line-height: 1.1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: var(--jet-black);
                transition: font-size 300ms var(--out);
                .internal-link::after {
                    content: " →";
                }
            }
        }

        .fabric-card {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            min-height: 80vh;
            overflow: hidden;
            cursor: pointer;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
            }

            .fabric-card__media {
                position: absolute;
                inset: 0;
                overflow: hidden;

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

                .fabric-card__media-container {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    touch-action: pan-y pinch-zoom;
                }
                
                .fabric-card__media-slide {
                    border-radius: var(--space-sm);
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    opacity: 0;
                    transition: opacity 420ms var(--out), border-radius 420ms var(--out);
                    will-change: opacity, border-radius;
                }

                .fabric-card__media-slide.is-active {
                    /* TODO: somehow all elements are always active */
                    border-radius: 0 var(--space-sm) var(--space-sm) var(--space-sm);
                    opacity: 1;
                }
            }

            ul {
                position: relative;
                z-index: 1;
                width: 100%;
                margin: 0;
                padding: var(--space-sm);
                list-style: none;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: var(--space-xs);
                align-items: flex-start;
                transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);

                li {
                    display: flex;
                    flex: 0 0 0.8rem;
                    width: 0.8rem;
                    height: 0.8rem;
                    transition: opacity 300ms var(--in);
                }

                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-indent: -9999px;
                    background-color: var(--jet-black);
                    opacity: 0.92;
                    transform: translateY(0);
                    transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);
                    pointer-events: none;
                }

                a.is-active {
                    background-color: var(--the-white);
                    opacity: 1;
                }
            }

            &.is-expanded {
                ul {
                    align-items: flex-start;
                    flex-direction: column;
                    gap: var(--space-xs);

                    li {
                        flex: 0 0 auto;
                        width: auto;
                        height: auto;
                    }

                    a {
                        width: auto;
                        height: auto;
                        min-height: var(--tap-target-size);
                        overflow: visible;
                        white-space: normal;
                        text-indent: 0;
                        display: inline-flex;
                        align-items: center;
                        color: var(--the-white);
                        background-color: var(--jet-black);
                        padding-inline: var(--space-sm);
                        opacity: 1;
                        transform: translateY(0);
                        border-radius: 0;
                        pointer-events: auto;
                    }

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

        &.is-expanded {
            .fabric-card__header {
                background: var(--jet-black);

                h2 {
                    color: var(--the-white);
                }
            }
        }
    }

    &.has-expanded {
        .fabric-grid__item {
            flex-grow: 1;

            &:not(.is-expanded) {
                .fabric-card__header h2 {
                    font-size: var(--fs-sm);
                }
            }

            &.is-expanded {
                flex-grow: 8;
            }
        }
    }
}

@media (max-width: 64rem) {
    .fabric-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-xxl);
        width: 100%;
        padding: var(--space-md) 0;
        padding-inline: var(--space-sm);

        .fabric-grid__item {
            flex: 0 0 auto;
            width: 100%;

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

            .fabric-card ul {
                padding: var(--space-xs);
                gap: var(--space-xs);

                li {
                    flex: 0 0 auto;
                    width: auto;
                    height: auto;
                }

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

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

        &.has-expanded {
            .fabric-grid__item,
            .fabric-grid__item.is-expanded {
                flex-grow: 1;
            }

            .fabric-grid__item .fabric-card__header h2 {
                font-size: var(--fs-md);
            }
        }
    }
}

@media (max-width: 48rem) {
    .fabric-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        width: 100%;
        padding-inline: var(--space-sm);

        .fabric-grid__item {
            .fabric-card,
            .fabric-card.is-expanded {
                min-height: clamp(50vh, 75vh, 110vh);
            }

            .fabric-card ul {
                padding: 0;
            }

            .fabric-card ul a {
                max-width: 100%;
            }

            .fabric-card__header {
                padding: var(--space-xs);
            }
        }
    }
}
.fabric-card__toggle {
    position: absolute;
    z-index: 2;
    bottom: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: var(--super-white);
    color: var(--jet-black);
    font-size: 2rem;
}