﻿/*--------------------------------------------------------------- Media Queries */

/*-------------- Media Query 900 --------------- */
@media screen and (max-width: 900px) {
    /*-----------Header */
    .header {
        padding: var(--padding-st-l-v) var(--padding-st-l-h);
    }
    /*---------Main */
    .main {
        padding: var(--padding-st-s-h) var( --padding-st-m-h);
    }
    /* --------- Footer__Items */
    .footer__items {
        font-size: var(--font-size-d-xsc);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: var(--padding-st-s-v) var(--padding-st-s-h);
    }

    .footer__items--item__SAGO {
        display: inline;
    }

    .footer__items--item:nth-of-type(1) {
        order: 2;
    }

    .footer__items--item:nth-of-type(2) {
        order: 1;
    }

    .footer__items--item:nth-of-type(3) {
        order: 3;
    }

    .footer__items--item:nth-of-type(4) {
        order: 4;
    }

    .footer__items--item:nth-of-type(5) {
        order: 5;
    }

    /*------------------------ Utility Classes  */


    .footer__padding {
        padding: var(--padding-st-s-v) var(--padding-st-s-h);
    }
}
/*--------------      Media Query 750 ----------*/
@media screen and (max-width: 750px) {

    .header {
        justify-content: space-around;
        align-items: end;
        padding: var(--padding-st-l-v) var(--padding-st-s-h);
    }

    .header__logo {
        display: none;
    }

    .header__user {
        display: none;
    }

    .header__user-profile-icon {
        display: inline;
        grid-column: 7 / span 1;
    }

    .header__mobile-logo {
        display: inline;
        grid-column: 3 / span 3;
    }



    .header__profile-menu--items {
        width: 100%;
        min-width: 35rem;
    }
}

/*------------------- Media Query 500 --------- */
@media screen and (max-width: 500px) {


    .main {
        padding: var(--padding-st-s-h) var(--padding-st-s-v);
        max-width: var(--w-st-main-container-min);
    }
}
