/* #Flex Styles */
.flex-grid,
.flex-display {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-align-baseline {
    align-items: -webkit-baseline;
    align-items: -ms-flex-align-baseline;
    align-items: baseline;
}

.flex-align-start {
    align-items: -webkit-flex-start;
    align-items: -ms-flex-align-start;
    align-items: flex-start;
}

.flex-align-center {
    align-items: -webkit-center;
    align-items: -ms-flex-align-center;
    align-items: center;
}

.flex-align-flex-end {
    align-items: -webkit-flex-end;
    align-items: -ms-flex-align-flex-end;
    align-items: flex-end;
}

.flex-justify-center {
    justify-content: -webkit-center;
    justify-content: -ms-flex-justify-center;
    justify-content: center;
}

.flex-justify-space-between {
    justify-content: -webkit-space-between;
    justify-content: -ms-flex-justify-space-between;
    justify-content: space-between;
}

.flex-justify-space-evenly {
    justify-content: -webkit-space-evenly;
    justify-content: -ms-flex-justify-space-evenly;
    justify-content: space-evenly;
}

.flex-justify-space-around {
    justify-content: -webkit-space-around;
    justify-content: -ms-flex-justify-space-around;
    justify-content: space-around;
}

.flex-justify-end {
    justify-content: -webkit-flex-end;
    justify-content: -ms-flex-justify-end;
    justify-content: flex-end;
}

.flex-wrap-wrap {
    flex-wrap: -webkit-wrap;
    flex-wrap: -ms-flex-wrap;
    flex-wrap: wrap;
}

.flex-direction-column {
    flex-direction: -webkit-column;
    flex-direction: -ms-flex-direction-column;
    flex-direction: column;
}

/* #Grid Styles */
.grid-display {
    display: grid;
}

/* Extra Utilities */
.align-self-center {
    align-self: center;
}

.text-align-center {
    text-align: center;
}

.text-wrap-balance {
    text-wrap: balance;
}

.text-wrap-pretty {
    text-wrap: pretty;
}

@media (min-width: 768px) {
    /* Grid Styles - Table of contents
    - #Container Spacing
    - #Flex Spacing
    - #Grid Spacing
    - #Desktop Column Widths
    - #Desktop Grid Spacing
    - #Utility Spacing
    - #Typography 
    */

    /* #Container Spacing */
    .container,
    .banner-container,
    .header-bar,
    .main-content-webpage,
    .main-content-general,
    .main-content-cart,
    .main-content-search,
    .category-prod-section {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--container-max-width);
        padding-left: 4rem !important;
        padding-right: 4rem;
    }

    .main-content-webpage,
    .main-content-general,
    .main-content-cart,
    .main-content-search {
        padding-bottom: 4rem;
        padding-top: 4rem;
    }

    /* #Flex Spacing */
    .flex-grid {
        margin-left: -3rem;
    }

    .flex-col {
        padding-left: 3rem;
    }

    /* #Desktop Flex Column Widths */
    .d-col-1 {
        flex-basis: 8.333%;
        max-width: 8.333%;
        -ms-flex-preferred-size: 8.333%;
    }

    .d-col-2 {
        flex-basis: 16.66%;
        max-width: 16.66%;
        -ms-flex-preferred-size: 16.66%;
    }

    .d-col-3,
    .d-col-thirds {
        flex-basis: 25%;
        max-width: 25%;
        -ms-flex-preferred-size: 25%;
    }

    .d-col-4,
    .d-col-quarters {
        flex-basis: 33.33%;
        max-width: 33.33%;
        -ms-flex-preferred-size: 33.33%;
    }

    .d-col-5 {
        flex-basis: 41.66%;
        max-width: 41.66%;
        -ms-flex-preferred-size: 41.66%;
    }

    .d-col-6,
    .d-col-halfs {
        flex-basis: 50%;
        max-width: 50%;
        -ms-flex-preferred-size: 50%;
    }

    .d-col-7 {
        flex-basis: 58.33%;
        max-width: 58.33%;
        -ms-flex-preferred-size: 58.33%;
    }

    .d-col-8 {
        flex-basis: 66.66%;
        max-width: 66.66%;
        -ms-flex-preferred-size: 66.66%;
    }

    .d-col-9 {
        flex-basis: 75%;
        max-width: 75%;
        -ms-flex-preferred-size: 75%;
    }

    .d-col-10 {
        flex-basis: 83.33%;
        max-width: 83.33%;
        -ms-flex-preferred-size: 83.33%;
    }

    .d-col-11 {
        flex-basis: 91.66%;
        max-width: 91.66%;
        -ms-flex-preferred-size: 91.66%;
    }

    .d-col-12,
    .d-col-full {
        flex-basis: 100%;
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
    }
    
    /* #Grid Column Widths */
    .d-grid-col-1 {
        grid-template-columns: 1fr;
    }

    .d-grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .d-grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .d-grid-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .d-grid-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .d-grid-col-7 {
        grid-template-columns: repeat(7, 1fr);
    }

    .d-grid-col-8 {
        grid-template-columns: repeat(8, 1fr);
    }

    .d-grid-col-2-3 {
        grid-template-columns: 2fr 3fr;
    }

    .d-grid-col-3-2 {
        grid-template-columns: 3fr 2fr;
    }

    /* Desktop Grid Spacing */
    .d-grid-gap-1 {
        gap: 1rem;
    }
    
    .d-grid-gap-2 {
        gap: 2rem;
    }
    
    .d-grid-gap-3 {
        gap: 3rem;
    }
    
    .d-grid-gap-4 {
        gap: 4rem;
    }
    
    .d-grid-gap-5 {
        gap: 5rem;
    }
    
    .d-grid-gap-6 {
        gap: 6rem;
    }
    
    .d-grid-gap-7 {
        gap: 7rem;
    }
    
    .d-grid-gap-8 {
        gap: 8rem;
    }

    /* #Utility Spacing */
    /* Margin Top Utilities */
    .s-margin-top-d {
        margin-top: 1rem;
    }

    .m-margin-top-d {
        margin-top: 2rem;
    }

    .l-margin-top-d {
        margin-top: 3rem;
    }

    .xl-margin-top-d {
        margin-top: 4rem;
    }

    .xxl-margin-top-d {
        margin-top: 8rem;
    }

    /* Margin Right Utilities */
    .s-margin-right-d {
        margin-right: 1rem;
    }

    .m-margin-right-d {
        margin-right: 2rem;
    }

    .l-margin-right-d {
        margin-right: 3rem;
    }

    .xl-margin-right-d {
        margin-right: 4rem;
    }

    .xxl-margin-right-d {
        margin-right: 8rem;
    }

    /* Margin Bottom Utilities */
    .s-margin-btm-d {
        margin-bottom: 1rem;
    }

    .m-margin-btm-d {
        margin-bottom: 2rem;
    }

    .l-margin-btm-d {
        margin-bottom: 3rem;
    }

    .xl-margin-btm-d {
        margin-bottom: 4rem;
    }

    .xxl-margin-btm-d {
        margin-bottom: 8rem;
    }

    /* Margin Left Utilities */
    .s-margin-left-d {
        margin-left: 1rem;
    }

    .m-margin-left-d {
        margin-left: 2rem;
    }

    .l-margin-left-d {
        margin-left: 3rem;
    }

    .xl-margin-left-d {
        margin-left: 4rem;
    }

    .xxl-margin-left-d {
        margin-left: 8rem;
    }

    /* Padding Top Utilities */
    .s-padding-top-d {
        padding-top: 1rem;
    }

    .m-padding-top-d {
        padding-top: 2rem;
    }

    .l-padding-top-d {
        padding-top: 3rem;
    }

    .xl-padding-top-d {
        padding-top: 4rem;
    }

    .xxl-padding-top-d {
        padding-top: 8rem;
    }

    /* Padding Right Utilities */
    .s-padding-right-d {
        padding-right: 1rem;
    }

    .m-padding-right-d {
        padding-right: 2rem;
    }

    .l-padding-right-d {
        padding-right: 3rem;
    }

    .xl-padding-right-d {
        padding-right: 4rem;
    }

    .xxl-padding-right-d {
        padding-right: 8rem;
    }

    /* Padding Bottom Utilities */
    .s-padding-btm-d {
        padding-bottom: 1rem;
    }

    .m-padding-btm-d {
        padding-bottom: 2rem;
    }

    .l-padding-btm-d {
        padding-bottom: 3rem;
    }

    .xl-padding-btm-d {
        padding-bottom: 4rem;
    }

    .xxl-padding-btm-d {
        padding-bottom: 8rem;
    }

    /* Padding Left Utilities */
    .s-padding-left-d {
        padding-left: 1rem;
    }

    .m-padding-left-d {
        padding-left: 2rem;
    }

    .l-padding-left-d {
        padding-left: 3rem;
    }

    .xl-padding-left-d {
        padding-left: 4rem;
    }

    .xxl-padding-left-d {
        padding-left: 8rem;
    }

    /* Padding Full Utilities */
    .s-padding-full-d {
        padding: 1rem;
    }

    .m-padding-full-d {
        padding: 2rem;
    }

    .l-padding-full-d {
        padding: 3rem;
    }

    .xl-padding-full-d {
        padding: 4rem;
    }

    .xxl-padding-full-d {
        padding: 8rem;
    }

    /* #Typography */
    h1,
    .section-title {
        font-size: 2.6rem;
    }

    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 2.2rem;
    }

    h4 {
        font-size: 2rem;
    }

    h5 {
        font-size: 1.8rem;
    }

    h6 {
        font-size: 1.6rem;
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    /* Grid Styles - Table of contents
    - #Container Spacing
    - #Flex Spacing
    - #Mobile Flex Column Widths
    - #Mobile Grid Column Widths
    - #Mobile Grid Gaps
    - #Utility Spacing
    - #Typography 
    */

    /* #Container Spacing */
    .container,
    .header-container,
    .main-content-webpage,
    .main-content-general,
    .main-content-cart,
    .main-content-search {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .main-content-webpage,
    .main-content-general,
    .main-content-cart,
    .main-content-search {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    /* #Flex Spacing */
    .flex-grid {
        margin-left: -2rem;
    }

    .flex-col {
        padding-left: 2rem;
    }

    /* #Mobile Flex Column Widths */
    .m-col-3 {
        flex-basis: 25%;
        max-width: 25%;
        -ms-flex-preferred-size: 25%;
    }

    .m-col-4 {
        flex-basis: 33.33%;
        max-width: 33.33%;
        -ms-flex-preferred-size: 33.33%;
    }

    .m-col-6 {
        flex-basis: 50%;
        max-width: 50%;
        -ms-flex-preferred-size: 50%;
    }

    .m-col-12 {
        flex-basis: 100%;
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
    }

    /* #Mobile Grid Column Widths */
    .m-grid-col-1 {
        grid-template-columns: 1fr;
    }

    .m-grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .m-grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .m-grid-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* #Mobile Grid Gaps */
    .m-grid-gap-1 {
        gap: 1rem;
    }

    .m-grid-gap-2 {
        gap: 2rem;
    }

    .m-grid-gap-3 {
        gap: 3rem;
    }

    .m-grid-gap-4 {
        gap: 4rem;
    }

    .m-grid-gap-5 {
        gap: 5rem;
    }

    .m-grid-gap-6 {
        gap: 6rem;
    }

    /* #Utilities Styles */
    /* Margin Top Utilities */
    .s-margin-top-m {
        margin-top: 0.7rem;
    }

    .m-margin-top-m {
        margin-top: 1rem;
    }

    .l-margin-top-m {
        margin-top: 2rem;
    }

    .xl-margin-top-m {
        margin-top: 3rem;
    }

    .xxl-margin-top-m {
        margin-top: 6rem;
    }

    /* Margin Right Utilities */
    .s-margin-right-m {
        margin-right: 0.7rem;
    }

    .m-margin-right-m {
        margin-right: 1rem;
    }

    .l-margin-right-m {
        margin-right: 2rem;
    }

    .xl-margin-right-m {
        margin-right: 3rem;
    }

    .xxl-margin-right-m {
        margin-right: 6rem;
    }

    /* Margin Bottom Utilities */
    .s-margin-btm-m {
        margin-bottom: 0.7rem;
    }

    .m-margin-btm-m {
        margin-bottom: 1rem;
    }

    .l-margin-btm-m {
        margin-bottom: 2rem;
    }

    .xl-margin-btm-m {
        margin-bottom: 3rem;
    }

    .xxl-margin-btm-m {
        margin-bottom: 6rem;
    }

    /* Margin Left Utilities */
    .s-margin-left-m {
        margin-left: 0.7rem;
    }

    .m-margin-left-m {
        margin-left: 1rem;
    }

    .l-margin-left-m {
        margin-left: 2rem;
    }

    .xl-margin-left-m {
        margin-left: 3rem;
    }

    .xxl-margin-left-m {
        margin-left: 6rem;
    }

    /* Padding Top Utilities */
    .s-padding-top-m {
        padding-top: 0.7rem;
    }

    .m-padding-top-m {
        padding-top: 1rem;
    }

    .l-padding-top-m {
        padding-top: 2rem;
    }

    .xl-padding-top-m {
        padding-top: 3rem;
    }

    .xxl-padding-top-m {
        padding-top: 6rem;
    }

    /* Padding Right Utilities */
    .s-padding-right-m {
        padding-right: 0.7rem;
    }

    .m-padding-right-m {
        padding-right: 1rem;
    }

    .l-padding-right-m {
        padding-right: 2rem;
    }

    .xl-padding-right-m {
        padding-right: 3rem;
    }

    .xxl-padding-right-m {
        padding-right: 6rem;
    }

    /* Padding Bottom Utilities */
    .s-padding-btm-m {
        padding-bottom: 0.7rem;
    }

    .m-padding-btm-m {
        padding-bottom: 1rem;
    }

    .l-padding-btm-m {
        padding-bottom: 2rem;
    }

    .xl-padding-btm-m {
        padding-bottom: 3rem;
    }

    .xxl-padding-btm-m {
        padding-bottom: 6rem;
    }

    /* Padding Left Utilities */
    .s-padding-left-m {
        padding-left: 0.7rem;
    }

    .m-padding-left-m {
        padding-left: 1rem;
    }

    .l-padding-left-m {
        padding-left: 2rem;
    }

    .xl-padding-left-m {
        padding-left: 3rem;
    }

    .xxl-padding-left-m {
        padding-left: 6rem;
    }

    /* Padding Full Utilities */
    .s-padding-full-m {
        padding: 0.7rem;
    }

    .m-padding-full-m {
        padding: 1rem;
    }

    .l-padding-full-m {
        padding: 2rem;
    }

    .xl-padding-full-m {
        padding: 3rem;
    }

    .xxl-padding-full-m {
        padding: 6rem;
    }

    /* #Typography */
    h1,
    .section-title {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.9rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    h4 {
        font-size: 1.7rem;
    }

    h5 {
        font-size: 1.6rem;
    }

    h6 {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Grid Styles - Table of contents
    - #Tablet Flex Column Widths
    - #Tablet Grid Column Widths 
    */

    /* #Tablet Flex Column Widths */
    .t-col-3 {
        flex-basis: 25%;
        max-width: 25%;
        -ms-flex-preferred-size: 25%;
    }

    .t-col-4 {
        flex-basis: 33.33%;
        max-width: 33.33%;
        -ms-flex-preferred-size: 33.33%;
    }

    .t-col-6 {
        flex-basis: 50%;
        max-width: 50%;
        -ms-flex-preferred-size: 50%;
    }

    .t-col-12 {
        flex-basis: 100%;
        max-width: 100%;
        -ms-flex-preferred-size: 100%;
    }

    /* #Tablet Grid Column Widths */
    .t-grid-col-1 {
        grid-template-columns: 1fr;
    }

    .t-grid-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .t-grid-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .t-grid-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .t-grid-col-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .t-grid-col-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}