@charset "utf-8";


:root {
    --pdg-responsive: 1rem 1.5rem
}

/*
** Aspect Ratio
** Base - 8
** Media Queries
*/
.grid-container{
    margin: 0 auto;
    width:100%;
}
/*
** Phone
** Extra-small | 8 x 40 - 320px |
*/
@media handheld and (min-width: 319px),
screen and (min-width: 319px) {
}
/*
** Tablet
** Small | VGA | 8 X 80 - 640px|
*/
@media screen and (min-width: 640px) {
    :root {
        --size-xsmall: .5rem;
        --size-small: 1rem;
        --size-normal: 2rem;
        --size-large: 4rem
    }

    .grid-container {
        max-width: 640px
    }

    .column-after-row {
        flex-direction: row;
    }
}

@media screen and (min-width: 720px) {
    .grid-container{
        max-width: 720px
    }
}
@media screen and (min-width: 840px){
    .grid-container {
        max-width:840px
    }
}
/*
** Laptop
** Medium | 8 X 120 - 960px|
*/
@media screen and (min-width: 960px){
    :root {
        --pdg-responsive: 1.25rem 1.75rem
    }
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840)) {
        max-width:960px
    }
}
@media screen and (min-width: 1024px){
    :root{
        --size-xsmall: 1rem;
        --size-small:2rem;
        --size-normal:4rem;
        --size-large:8rem
    }
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960)) {
        max-width:1024px
    }
}
/*
** Desktop
** Medium | 8 X 160 - 1280px|
*/
@media screen and (min-width: 1280px){
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024)) {
        max-width:1280px
    }
}
@media screen and (min-width: 1366px){
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024, .grid-container--1280)) {
        max-width:1366px
    }
}
/* 8 X 180 - 1440px */
@media screen and (min-width: 1440px){
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024, .grid-container--1280, .grid-container--1366)) {
        max-width:1440px
    }
    .gap-grid-2{
        gap: 3rem
    }
}
/* 8 X 200 - 1600px */
@media screen and (min-width: 1600px){
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024, .grid-container--1280, .grid-container--1366, .grid-container--1440)) {
        max-width:1600px
    }
}
/* 8 X 240 - 1920px */
@media screen and (min-width: 1920px){
    .grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024, .grid-container--1280, .grid-container--1366, .grid-container--1440)) {
        max-width:1920px
    }
}
/* 8 X 280 - 2240px */
@media screen and (min-width: 2240px){
.grid-container:not(:where(.grid-container--640, .grid-container--720, .grid-container--840, .grid-container--960, .grid-container--1024, .grid-container--1280, .grid-container--1366, .grid-container--1440)) {
        max-width:2240px
    }
}