@media (max-width:700px){

.container{

width:calc(100% - 32px);

}

h1{

font-size:3rem;

}

.nav-links{

display:none;

}

}

@media (max-width:900px){

.hero{

    padding-top:120px;

    min-height:auto;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content{

    margin-inline:auto;

}

.hero-actions{

    justify-content:center;

}

.hero-device{

    margin-top:var(--space-3xl);

}

}
@media (max-width: 900px) {

    .phone {

        width: 260px;

    }

}

@media (max-width: 600px) {

    .phone {

        width: 220px;

    }

}

@media (max-width: 768px) {

    .footer-top {

        flex-direction: column;

        gap: 2rem;

    }

    .footer-nav {

        flex-wrap: wrap;

        gap: 1rem 2rem;

    }

}