/**###################
    ####### NAVBAR #######
    ####################*/

    @media (max-width: 800px) {
        .burger-menu-container {
            left: -50%;
            width: 50%;
        }

        .burger-menu-active {
            left: 0;
        }
    }

    @media (max-width: 500px) {
        .horizontal-nav .nav-misc-container .account-icon {
            display: none;
        }

        .horizontal-nav .nav-logo {
            width: clamp(50px, calc(100px + 3rem), 300px);
        }

        .burger-menu-scroll-wrapper {
            padding: 80px 20px 20px 20px;
            width: calc(100% - 41px);
        }

        .burger-menu-container h1 {
            font-size: 1.7rem;
        }

        .burger-content h2 {
            font-size: 1.3rem;
        }

        .nav-searchbar {
            font-size: 1rem;
        }

        .burger-content {
            padding-left: 0;
            width: 100%;
        }

        .burger-menu-container {
            left: -65%;
            width: 65%;
        }

        .burger-menu-active {
            left: 0;
        }

    }

    @media (max-width: 350px) {

        .horizontal-nav .nav-logo {
            width: clamp(50px, calc(80px + 2rem), 200px);
        }

        #nav-search-open-button, .nav-panier-icon, .account-icon {
            font-size: 1.5rem !important;
        }
    }

    /**#################
    ####### HOME #######
    ##################*/

    @media (max-width: 800px) {
        .main-tile {
            flex-direction: column;
        }

        .main-tile .collection-info .collection-title {
            font-size: 5vw;
        }

        .main-tile .collection-info .collection-desc {
            font-size: 3vw;
        }

        .tile-new {
            padding: 0;
            width: 80%;
        }

        .main-tile .collection-info .collection-title h2 {
            font-size: 3.3rem;
        }
    }

    @media (max-width: 500px) {
        .tile-collection {
            width: 90%;
            padding: 20px;
            box-sizing: border-box;
        }

        .tile-new {
            padding: 0;
            width: 100%;
            gap: 20px;
        }

        .main-button {
            padding: 15px 40px;
            font-size: 1rem;
        }

        .main-tile .collection-info .collection-title {
            top: 0;
        }

        .tile-new .new-collection-container {
            gap: 6px;
        }

        .tile-new .validate-button-black {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 350px) {

        .main-tile .collection-info .collection-title {
            top: -2%;
        }

        .main-tile .collection-info .collection-title h2 {
            font-size: 2.3rem;
        }
    }

    /**#####################
    ####### BOUTIQUE #######
    ######################*/

    @media (min-width: 4000px) {
        .card-vetement {
            width: 11%;
        }
    }

    @media (max-width: 800px) {
        .card-vetement {
            width: 40%;
        }
    }

    @media (max-width: 500px) {
        .card-vetement {
            width: 80%;
        }
    }

    /**###################
    ####### PANIER #######
    ####################*/

    @media (max-width: 800px) {
        .panier-section-container {
            flex-direction: column;
        }

        .panier-img-container {
            width: 125px;
            height: 125px;
        }

        .panier-boutique-container {
            width: 300px;
            max-height: 400px;
        }

        .panier-boutique-wrapper {
            top: 100px;
            right: 15px;
        }
    }

    @media (max-width: 500px) {
        .panier-boutique-wrapper {
            top: 90px;
            right: 10px;
        }

        .panier-boutique-button {
            width: 45px;
            height: 45px;
        }

        .panier-boutique-container {
            width: calc(100vw - 30px);
            right: -5px;
        }

        .panier-boutique-item-name {
            max-width: 140px;
        }
    }

    /**###########################
    ####### ADMIN #######
    ############################*/

    @media (max-width: 1000px) {
        .crud-button-container a {
            padding: 3px 5px;
        }

        td,
        th {
            padding: 4px;
        }
    }

    @media (max-width: 900px) {
        .dashboard-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 500px) {
        .dashboard-grid {
            grid-template-columns: 1fr;
        }
}

    /**###################
    ####### FOOTER #######
    ####################*/

    @media (max-width: 800px) {
        footer .validate-button-white {
            font-size: 0.8rem !important;
            padding: 8px 16px;
        }
    }