.faq-card-shell {
    position: relative;
    max-width: 100vw;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: min(3rem, 8vw);
        z-index: 2;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    &::before {
        left: 0;
        background: linear-gradient(to right, var(--col-bw-000), transparent);
        opacity: 0;
    }

    &::after {
        right: 0;
        background: linear-gradient(to left, var(--col-bw-000), transparent);
    }

    &.is-scrolled::before {
        opacity: 0;
    }

    .faq-card-grid {
        --faq-rail-inset: 1rem;
        --faq-grid-gap: 1rem;

        display: flex;
        flex-wrap: nowrap;
        gap: var(--faq-grid-gap);
        overflow-x: scroll;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-right: 1rem;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--faq-rail-inset);
        scroll-padding-right: 3rem;

        &::before {
            content: "";
            flex: 0 0 calc(var(--faq-rail-inset) - var(--faq-grid-gap));
        }

        &::-webkit-scrollbar {
            display: none;
        }

        .faq-card {
            margin: .5rem 0;
            flex: 0 0 min(15rem, calc(100vw - 5rem));
            display: grid;
            gap: .75rem;
            min-height: 11rem;
            padding: 1.3rem 1.5rem;
            border-radius: var(--border-radius-m);
            color: inherit;
            transition: transform .18s ease, box-shadow .18s ease;
            background: radial-gradient(circle at 20% 30%, var(--col-100) 0%, transparent 48%),
            radial-gradient(circle at 80% 20%, var(--col-200) 0%, transparent 44%),
            radial-gradient(circle at 65% 75%, var(--col-300) 0%, transparent 52%),
            radial-gradient(circle at 25% 80%, var(--col-200) 0%, transparent 46%),
            var(--col-bw-200);
            background-size: 140% 140%;
            scroll-snap-align: start;

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    text-decoration: underline;
                }
            }

            &:hover {
                text-decoration: none;
                transform: scale(1.03);
            }

            .faq-card-copy {
                position: relative;
                display: grid;
                flex: 1;
                min-height: 6.5rem;
            }

            .faq-card-question,
            .faq-card-teaser {
                grid-area: 1 / 1;
                transition: opacity .28s ease, transform .28s ease;
            }

            .faq-card-question {
                align-self: center;
                font-size: 1.2rem;
                letter-spacing: -.03em;
                color: var(--color-ink);
                font-weight: 700;
                opacity: 1;
                transform: translateY(0);
            }

            .faq-card-teaser {
                align-self: center;
                color: var(--color-ink);
                line-height: 1.55;
                opacity: 0;
                transform: translateY(.5rem);
            }

            &:hover {
                .faq-card-question {
                    opacity: 0;
                    transform: translateY(-.5rem);
                }

                .faq-card-teaser {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .faq-card-link {
                margin-top: auto;
                color: var(--col-600);

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

@media (min-width: 30rem) {
    .faq-card-shell {
        &::before,
        &::after,
        &.is-scrolled::before {
            opacity: 1;
        }

        .faq-card-grid {
            --faq-rail-inset: 2rem;
        }
    }
}

@media (min-width: 60rem) {
    .faq-card-shell {
        .faq-card-grid {
            --faq-rail-inset: calc(
                    (max(55rem, 100vw - 10rem) - max(40rem, 100vw - 50rem)) / 2
            );
        }
    }
}

@media (min-width: 130rem) {
    .faq-card-shell {
        .faq-card-grid {
            --faq-rail-inset: 25rem;
        }
    }
}