@layer genr.component {
    /* Mobile-first base styles */
    .figures__background {
        background: var(--color-dark-green);
    }

    .figures {
        max-width: 75rem;
        margin: 0 auto;
        padding: 4rem 1.5rem 4.5rem;
        color: var(--color-light-patrol);
        display: flex;
        flex-direction: column;
        gap: 3rem;

        @media (width > 576px) {
            flex-direction: row;
        }

        @media (width > 768px) {
            flex-direction: row;
            padding-block: 8rem;
            gap: 1.5rem;
        }

        @media (width > 1280px) {
            padding-inline: 0;
        }
    }

    .figures__container {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-basis: 50%;
        flex-direction: column;
        gap: 1.5rem;

        @media (width > 992px) {
            flex-basis: 33%;
        }
    }

    .figures__header {
        font-size: 2.5rem;
        font-weight: 700;

        position: sticky;
        top: var(--header-height-md);
    }

    .figures__list {
        flex-basis: 66%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3rem;

        @media (width > 576px) {
            display: flex;
            flex-direction: column;
        }

        @media (width > 992px) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
        }
    }

    .figures__item {
        display: flex;
        flex-direction: column;
        padding-left: 1.5rem;
        padding-right: 1rem;
        border-left: 1px solid var(--color-border);
        gap: 0.5rem;
        flex: 1 1 0;
    }

    .figures__title {
        width: fit-content;
        font-weight: 700;
        font-size: 3.5rem;
        line-height: 3.75rem;
    }

    .figures__bodytext {
        color: var(--color-white);
    }
}