/*
=========================================
AvxBrand - Responsive Stylesheet
=========================================
*/

/* 1. Large Desktop (max-width: 1400px) */
@media screen and (max-width: 1400px) {
    /* Adjustments for wider screens */
    :root {
        --container-max-width: 1200px;
    }
}

/* 2. Desktop (max-width: 1200px) */
@media screen and (max-width: 1200px) {
    /* Adjust grid templates, container sizes */
    :root {
        --container-max-width: 960px;
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. Laptop / Large Tablet (max-width: 992px) */
@media screen and (max-width: 992px) {
    /* Header modifications, navigation menu collapse layout */
    :root {
        --container-max-width: 720px;
    }

    .section {
        padding: 80px 0;
    }

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

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* 4. Medium Tablet (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Stack elements, adjust typographies */
    :root {
        --container-max-width: 540px;
    }

    .section {
        padding: 60px 0;
    }

    .grid-3, .grid-4, .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Stack flex elements */
    .flex-md-col {
        flex-direction: column;
    }
}

/* 5. Smart Phone (max-width: 576px) */
@media screen and (max-width: 576px) {
    /* Extra padding, font scale, button full-width */
    :root {
        --container-max-width: 100%;
    }

    .container {
        padding: 0 1rem;
    }

    .section {
        padding: 50px 0;
    }
    
    .btn {
        width: 100%;
    }
}

/* 6. Small Phone (max-width: 360px) */
@media screen and (max-width: 360px) {
    /* Tiny screens modifications, extra small sizing */
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 0.75rem;
    }
}