@media (max-width: 900px) {

    .main-navigation {

        display:
            none;

        position:
            absolute;

        top:
            80px;

        left:
            0;

        width:
            100%;

        padding:
            30px 20px;

        background:
            white;

        box-shadow:
            var(--shadow-medium);

    }

    .main-navigation.is-open {

        display:
            block;

    }

    .main-navigation ul {

        flex-direction:
            column;

    }

    .header-cta {

        display:
            none;

    }

    .menu-toggle {

        display:
            flex;

        flex-direction:
            column;

        gap:
            5px;

        border:
            0;

        background:
            transparent;

    }

    .menu-toggle span {

        width:
            25px;

        height:
            3px;

        background:
            var(--color-blue);

    }

    .footer-grid {

        grid-template-columns:
            1fr;

    }

    .footer-bottom {

        flex-direction:
            column;

    }

}

@media (max-width: 600px) {

    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container-width)
            );

    }

    .section {

        padding:
            70px 0;

    }

}

@media (max-width: 900px) {

    .hero-content {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }

    .hero {

        padding:
            70px 0 80px;

    }

    .hero-visual {

        max-width:
            650px;

        margin:
            0 auto;

    }

    .services-grid,
    .projects-grid,
    .articles-grid {

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

    }

    .content-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }

    .cookie-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}

@media (max-width: 600px) {

    .hero h1 {

        font-size:
            2.7rem;

    }

    .hero p {

        font-size:
            16px;

    }

    .hero-actions {

        flex-direction:
            column;

    }

    .hero-actions .btn {

        width:
            100%;

    }

    .services-grid,
    .projects-grid,
    .articles-grid,
    .form-grid {

        grid-template-columns:
            1fr;

    }

    .cta-section {

        padding:
            50px 25px;

    }

    .cookie-banner {

        left:
            10px;

        right:
            10px;

        bottom:
            10px;

    }

    .cookie-actions {

        width:
            100%;

        flex-direction:
            column;

    }

    .cookie-actions button {

        width:
            100%;

    }

}