:root {
    --gutter: 1.6rem;
    --content-large: 80rem;
    --padding-section-small: 2rem;
    --padding-section-medium: 3rem;
    --padding-section-large: 4rem;
    --padding-section-xlarge: 3rem;

    --margin-small: 1rem;
    --margin-medium: 1.5rem;
    --margin-large: 3rem;
    --margin-xlarge: 2.5rem;
    --margin-xxlarge: 3.5rem;
    --margin-xxhuge: 3rem;
}

.container {
    width: 100%;
    padding-inline: var(--gutter);
}

.content {
    width: 100%;
    max-width: var(--content-large);
    margin-inline: auto;
}

.grid-2 {
    display: flex;
    flex-direction: column;
    gap: var(--margin-medium);
}

/** MAX WIDTH **/

.max-width-large {
    width: 100%;
    max-width: 48.5rem;
}

.max-width-xxsmall {
    width: 100%;
    max-width: 12rem
}

/** SECTIONS **/

.padding-section-small {
    padding-block: var(--padding-section-small);
}

.padding-section-medium {
    padding-block: var(--padding-section-medium);
}

.padding-section-large {
    padding-block: var(--padding-section-large);
}

.padding-section-xlarge {
    padding-block: var(--padding-section-xlarge);
}


/** BUTTON GROUP **/

.button-group {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    display: flex
}


@media (min-width: 768px) {
    :root {
        --gutter: 1.5rem;
        --padding-section-small: 3rem;
        --padding-section-medium: 4rem;
        --padding-section-xlarge: 5rem;
        --margin-xlarge: 3rem;
        --margin-xxhuge: 7rem;
    }

}




@media (min-width: 1024px) {
    :root {
        --gutter: 2.5rem;
        --padding-section-large: 6rem;
        --padding-section-xlarge: 6rem;

        --margin-medium: 2rem;
        --margin-large: 4rem;
        --margin-xxlarge: 4rem;
        --margin-xlarge: 4rem;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}




@media (min-width: 1440px) {
    :root {
        --padding-section-xlarge: 10rem;
        --margin-xxlarge: 5rem;
    }
}