.grid,
.lg\:grid {
    --grid-columns: 1;
    --grid-gap: var(--margin-md);

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.gap-none {
    --grid-gap: 0;
}

.gap-4 {
    --grid-gap: 4px;
}

.gap-sm {
    --grid-gap: var(--margin-sm);
}

.gap-md {
    --grid-gap: var(--margin-md);
}

.aligncenter,
.container-measure,
.page-content > *:not(.block) {
    width: 90%;
    max-width: var(--w-measure);
    margin-left: auto;
    margin-right: auto;
}

.block-slider-news-feed .tns-nav,
.alignfull,
.page-content > .wpgmza_map,
.page-content > .alignfull,
.container-full {
    --w-full-padding: 5vw;

    width: 100%;
    max-width: 100vw;
    padding-left: var(--w-full-padding);
    padding-right: var(--w-full-padding);
}

.alignwide,
.page-content > .alignwide,
.container-wide {
    --w-wide-margin: auto;
    --w-wide-width: var(--w-measure);

    max-width: 90%;
    width: var(--w-wide-width);
    margin-left: var(--w-wide-margin);
    margin-right: var(--w-wide-margin);
}

@media only screen and (min-width: 48em) {
    .grid-cols-1 {
        --grid-columns: 1;
    }
    
    .grid-cols-2,
    .grid-cols-4,
    .grid-cols-6 {
        --grid-columns: 2;
    }
    
    .grid-cols-3 {
        --grid-columns: 3;
    }
}

@media only screen and (min-width: 64em) {

    .lg\:grid {
        display: grid;
        gap: var(--grid-gap);
        grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    .grid-cols-4 {
        --grid-columns: 4;
    }

    .grid-cols-6 {
        --grid-columns: 3;
    }

    .lg\:container-full {
        --w-full-padding: 5vw;
    
        width: 100%;
        max-width: 100vw;
        padding-left: var(--w-full-padding);
        padding-right: var(--w-full-padding);
    }

    .block-slider-news-feed .tns-nav,
    .alignfull,
    .page-content > .wpgmza_map,
    .page-content > .alignfull,
    .lg\:container-full,
    .container-full {
        --w-full-padding: 2.5vw;
    }

    .lg\:container-wide {
        --w-wide-margin: auto;
        --w-wide-width: var(--w-measure);
    
        max-width: 90%;
        width: var(--w-wide-width);
        margin-left: var(--w-wide-margin);
        margin-right: var(--w-wide-margin);
    }

    .alignwide,
    .page-content > .alignwide,
    .lg\:container-wide,
    .container-wide {
        /**
         * This is the original solution by the designer.
         * It calculates a negative margin from the center of the page.
         * This doesn't work since it creates an overflow on the page.
         * Which is why we are making our own calculation.
         */
        /* --w-wide-margin: calc( (-1 * (var(--type-root) * 1vw) * 10) / var(--type-scale)); */

        /**
         * This is our first attempt at the scaling on container-wide, which is not working properly.
         */
        /* --w-wide-width: auto;
        --w-wide-margin: calc((var(--type-root) * 1vw) * 10 / var(--type-scale)); */

        /* 
        
        (1.6 * 1vw) * 10 / 1.2

        */

        /**
         * These are more reliable solutions:
         */
        /* --w-wide-width: max(var(--w-measure), calc(51vw * var(--type-scale))); */
        --w-wide-width: calc(var(--w-measure) + (var(--type-root) * 1vw) * 10 / var(--type-scale) * 2);
    }
    
}

@media only screen and (min-width: 120em) {
    .grid-cols-6 {
        --grid-columns: 6;
    }
}