/* ==========================
   TABLET
========================== */

@media (max-width: 1000px) {

    .container {
        width: min(92%, 900px);
    }


    /* HEADER */

    .nav-menu {
        gap: 28px;
    }


    /* HERO */

    .hero {
        padding-top: 130px;
    }

    .hero-logo {
        width: min(380px, 80%);
    }


    /* ABOUT */

    .about-wrapper {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-content {
        max-width: 750px;
    }


    /* PRODUCTION */

    .production-wrapper {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .production-content {
        max-width: 700px;
    }

}


/* ==========================
   MOBILE
========================== */

@media (max-width: 700px) {

    /* HEADER */

    .header-container {
        height: 75px;
    }

    .logo img {
        width: 55px;
        height: 55px;
    }

    .nav-menu {
        gap: 16px;
    }

    .nav-menu a {
        font-size: 13px;
    }


    /* HERO */

    .hero {
        padding: 110px 0 55px;
    }

    .hero-logo {
        width: min(330px, 90%);
    }

    .hero-subtitle {
        font-size: 12px;

        letter-spacing: 1.5px;
    }

    .hero h1 {
        max-width: 500px;

        font-size: 19px;
    }


    /* FEATURED */

    .featured-brands {
        padding: 30px 0 80px;
    }

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

        gap: 12px;
    }

    .featured-item {
        border-radius: 10px;
    }


    /* ABOUT */

    .about {
        padding: 80px 0;
    }

    .about-wrapper {
        gap: 45px;
    }

    .about-content h2 {
        margin-bottom: 30px;

        font-size: 44px;
    }

    .about-content p {
        font-size: 16px;

        line-height: 1.8;
    }

    .about-brand-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;
    }


    /* PRODUCTION */

    .production {
        padding: 70px 0 90px;
    }

    .production-note {
        margin-bottom: 50px;

        font-size: 17px;
    }

    .production-wrapper {
        gap: 45px;
    }

    .production-grid {
        gap: 8px;
    }

    .production-small-title {
        font-size: 25px;
    }

    .production-content h2 {
        margin-bottom: 30px;

        font-size: 46px;
    }

    .production-content > p {
        font-size: 16px;
    }

    .production-list li {
        font-size: 15px;
    }


    /* CONTACT */

    .contact-wrapper {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* ==========================
   VERY SMALL MOBILE
========================== */

@media (max-width: 450px) {

    .container {
        width: 92%;
    }

    .nav-menu {
        gap: 11px;
    }

    .nav-menu a {
        font-size: 12px;
    }

    .hero-logo {
        width: 90%;
    }

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

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

}