@media screen and (min-width:0px) {
    html {
        font-size: small;
    }

    .body.flex {
        flex-direction: column;
    }

    footer > * {
        flex-direction: column;
    }

        footer > nav > section {
            margin-bottom: 2rem;
        }

    .optional {
        display: none !important;
    }

    .body.grid,
    .body.grid2,
    .body.grid3 {
        grid-template-columns: repeat(1, 1fr);
    }

        .body.grid > h1,
        .body.grid > h2,
        .body.grid > h3,
        .body.grid > h4,
        .body.grid > h5,
        .body.grid > h6,
        .body.grid2 > h1,
        .body.grid2 > h2,
        .body.grid2 > h3,
        .body.grid2 > h4,
        .body.grid2 > h5,
        .body.grid2 > h6,
        .body.grid3 > h1,
        .body.grid3 > h2,
        .body.grid3 > h3,
        .body.grid3 > h4,
        .body.grid3 > h5,
        .body.grid3 > h6 {
            grid-column: 1 / span 1;
        }

    .grid2 .span2 {
        grid-column: span 1;
    }

    .grid3 .span2 {
        grid-column: span 1;
    }

    .feature-image {
        /*START: 2021-08-11*/
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
        /*END: 2021-08-11*/
        margin-bottom: calc(100% / -3.2);
    }

        .feature-image img {
            /*START: 2021-08-11*/
            aspect-ratio: 1/1;
            /*END: 2021-08-11*/
        }

    nav {
        overflow-x: scroll;
    }

    header > * {
        flex-wrap: wrap;
    }

        header > * > * {
            display: block;
            margin: 0.25rem;
        }

    header .message {
        order: 4;
    }

    header .search {
        order: 3;
    }

    .simpleList {
        flex-direction: column;
    }

    .cartGrid,
    .cartGridTools {
        display: flex !important;
        flex-direction: column;
    }

        .cartGrid img {
            margin-bottom: 1rem;
        }

    .no-mobile {
        display: none !important;
    }

    .dialog {
        border-width: 0px;
        left: 0em;
        right: 0em;
        top: 0em;
        bottom: 0em;
        transform: unset;
        width: 100vw;
    }

    .smallButton {
        font-size: inherit;
        display: inline-block;
        text-align: left;
    }

}

@media screen and (min-width: 480px) {

    header .search,
    header .message {
        order: unset;
    }

    .optional {
        display: unset !important;
    }

    footer > * {
        flex-direction: row;
        flex-wrap: wrap;
    }

    footer > nav > section {
        flex-basis: calc(50% - 2rem);
    }

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

        .body.grid > h1,
        .body.grid > h2,
        .body.grid > h3,
        .body.grid > h4,
        .body.grid > h5,
        .body.grid > h6 {
            grid-column: 1 / span 2;
        }

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

        .body.grid2 > h1,
        .body.grid2 > h2,
        .body.grid2 > h3,
        .body.grid2 > h4,
        .body.grid2 > h5,
        .body.grid2 > h6 {
            grid-column: 1 / span 2;
        }

    .feature-image {
        /*START: 2021-08-11*/
        aspect-ratio: 2/1;
        width: 100%;
        height: 100%;
        /*END: 2021-08-11*/
        margin-bottom: calc(100% / -4.8);
    }

        .feature-image img {
            /*START: 2021-08-11*/
            aspect-ratio: 2/1;
            /*END: 2021-08-11*/
        }

}

@media screen and (min-width:768px) {

    header > .screen-container {
        flex-wrap: nowrap;
    }

    .cartGrid img {
        margin-bottom: 0rem;
    }

    .no-mobile {
        display: unset !important;
    }

    .no-desktop {
        display: none !important;
    }

    .cartGrid,
    .cartGridTools {
        display: grid !important;
    }

    .simpleList {
        flex-direction: row;
    }

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

    .mobile-right {
        text-align: unset;
    }

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

    .body.grid3 > h1,
    .body.grid3 > h2,
    .body.grid3 > h3,
    .body.grid3 > h4,
    .body.grid3 > h5,
    .body.grid3 > h6 {
        grid-column: 1 / span 2;
    }

    .body.flex {
        font-size: larger;
        flex-direction: row;
    }

    footer > nav > section {
        flex-basis: calc(25% - 2rem);
        margin-bottom: inherit;
    }

    nav {
        overflow-x: unset;
    }

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

        .body.grid > h1,
        .body.grid > h2,
        .body.grid > h3,
        .body.grid > h4,
        .body.grid > h5,
        .body.grid > h6 {
            grid-column: 1 / span 3;
        }

    header > * > * {
        display: block;
        margin: 1rem;
    }

    .dialog {
        border-width: 2px;
        left: 50%;
        top: 50%;
        right: unset;
        bottom: unset;
        transform: translate(-50%,-50%);
        width: 100%;
        max-width: var(--max-width);
    }

    .smallButton {
        font-size: smaller;
        display: block;
        text-align: center;
    }

}

@media screen and (min-width:850px) {
    html {
        font-size: medium;
    }

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

        .body.grid > h1,
        .body.grid > h2,
        .body.grid > h3,
        .body.grid > h4,
        .body.grid > h5,
        .body.grid > h6 {
            grid-column: 1 / span 4;
        }
}

@media screen and (min-width:1280px) {
    .body.grid {
        grid-template-columns: repeat(6, 1fr);
    }

        .body.grid > h1,
        .body.grid > h2,
        .body.grid > h3,
        .body.grid > h4,
        .body.grid > h5,
        .body.grid > h6 {
            grid-column: 1 / span 6;
        }

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

        .body.grid3 > h1,
        .body.grid3 > h2,
        .body.grid3 > h3,
        .body.grid3 > h4,
        .body.grid3 > h5,
        .body.grid3 > h6 {
            grid-column: 1 / span 3;
        }

    .grid3 .span2 {
        grid-column: span 2;
    }

}

@media (max-width: 1149px) {
    #catalog.body.grid > h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .item__title {
        font-size: 28px;
    }

    .item__base-price {
        font-size: 18px;
    }

    .item__desc__wrapper > p {
        font-size: 12px;
    }

    .product__help-links > a {
        font-size: 14px;
    }

    #upgrades .upgrades {
        column-gap: 2rem;
        row-gap: 1rem;
    }

    #upgrades .upgrades > section {
        padding-right: 0;
    }

    #upgrades,
    #upgrades * {
        font-size: 14px;
    }

    .designer__title {
        font-size: 18px;
    }

    .designer__title {
        font-size: 18px;
    }

    .face__title {
        font-size: 16px;
    }

    #designer .span2.designer select.slick,
    #designer .span2.designer .dd-select,
    #designer .span2.designer .dd-selected,
    #designer .span2.designer .dd-selected label,
    #designer .span2.designer .dd-option {
        font-size: 14px;
    }

    #designer .span2.designer .big.narrow,
    #designer .span2.designer .big.narrow h5,
    #designer .span2.designer .big.narrow p {
        font-size: 14px;
    }
}