:root
{
    /*FONT VARS*/
    --font-roboto: "Roboto", sans-serif;
    --font-arial: "Arial", sans-serif;
    --font-poppins: "Poppins", sans-serif;
    --font-sora: "Sora", sans-serif;
    --font-awesome: "Font Awesome 6 Free";
    --font-cambo: "Cambo",serif;
    --font-fira-sans: "Fira Sans", sans-serif;

    --border-radius: 1rem;

    --content-width: 75rem;
    --content-width-small: 56.25rem;
    --column-gap: 2.7rem;
}

*
{
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body
{
    margin: unset;
    line-height: 1.5;
}

.layout
{
    padding-inline: calc((100vw - var(--content-width)) / 2);
    padding-block: 6.25rem;
    justify-content: center;
}

.layout:has(.banner)
{
    padding: 0;
}

.layout--twocol-section,
.layout--threecol-section
{
    gap: var(--column-gap);
}

.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first, 
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second
{
    flex-basis: calc(33% - var(--column-gap));
}

.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second, 
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first 
{
    flex:calc(67% - var(--column-gap));
}

.layout--threecol-section .layout__region
{
    flex-basis: calc(34% - var(--column-gap));
}

h3
{
    font-size: 1.75rem;
}

.top-padding-reduce
{
    padding-top: calc(var(--column-gap) / 2);
}

.bottom-padding-reduce
{
    padding-bottom: calc(var(--column-gap) / 2);
}

.heading-xl h2
{
    font-family: var(--font-poppins);
    font-size: 3.37rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* p, li
{
    font-family: var(--font-roboto);
    font-size: 1.125rem;
} */

@media screen and (min-width: 40rem)
{
    .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first, 
    .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second
    {
        flex-basis: 100%;
    }
}

@media screen and (min-width: 50rem) 
{
    .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first, 
    .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second 
    {
    flex-basis: calc(50% - (var(--column-gap) / 2));
    }
}

@media screen and (max-width: 62rem)
{
    .layout--threecol-section .layout__region
    {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 75rem)
{
    .layout
    {
        padding-inline: 2rem;
    }
}