@layer components {
    .faq-layout {
        counter-reset: faq-num;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing-6);
    }

    .faq-list-item {
        background-color: var(--color-surface);
        background: linear-gradient(
            90deg,
            var(--color-surface) 0%,
            var(--color-surface-2) 100%
        );

        border-radius: var(--radius-lg);
        padding: var(--spacing-6);
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);

        &::before {
            --_size: 1.75rem;
            counter-increment: faq-num;
            content: counter(faq-num);
            position: absolute;
            top: calc(var(--_size) / -2);
            left: calc(var(--_size) / -2);
            border-radius: 50%;
            height: var(--_size);
            width: var(--_size);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--apple-red);
            color: var(--color-white);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-bold);
        }
    }

    .faq-list {
        li {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-4);
            align-items: center;
            background: var(--color-surface);
            padding: var(--spacing-6);
            border-radius: var(--radius-lg);
        }
    }

    .faq-list-question {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    .answer {
        color: var(--color-text-secondary);
    }

    /* === Row Offsets === */
    .faq-list-item:nth-child(1),
    .faq-list-item:nth-child(2),
    .faq-list-item:nth-child(3) {
        transform: translateX(calc(var(--spacing-12) * -1));
    }

    .faq-list-item:nth-child(7),
    .faq-list-item:nth-child(8),
    .faq-list-item:nth-child(9) {
        transform: translateX(var(--spacing-12));
    }
}