/* NOTEBOOKS */
@media (max-width: 1200px){
    .container{
        width: min(100% - 40px, var(--container));
    }

    .hero-content,
    .about-content,
    .contact-content{
        gap: 56px;
    }

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


/* TABLETS */
@media (max-width: 992px){
    /* Sections */
    section{
        min-height: auto;
        padding: 120px 0;
    }

    /* Hero */
    .hero-content{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .hero-text{
        order: 2;
    }

    .hero-image{
        order: 1;
    }

    .hero-text p{
        margin-inline: auto;
    }

    .hero-buttons{
        justify-content: center;
    }

    .hero-image img{
        max-width: 600px;
    }

    /* About */
    .about-content{
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-photo{
        order: -1;
    }

    .about-text{
        text-align: center;
    }

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

    /* Skills */
    .skills-grid{
        grid-template-columns: repeat(2,1fr);
    }

    /* Projects */
    .project-card{
        flex: 0 0 calc(100% - 40px);
    }

    /* Experience */
    .timeline{
        justify-content: flex-start;
    }

    .timeline-item{
        min-width: 320px;
    }

    /* Contact */
    .contact-content{
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-info{
        text-align: center;
    }

    .contact-info p{
        margin-inline: auto;
    }

    .contact-buttons{
        justify-content: center;
    }

    /* Footer */
    .footer-content{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .footer-brand p{
        margin-inline: auto;
    }

    .footer-nav{
        align-items: center;
    }

    .footer-social{
        justify-content: center;
    }
}

/* MOBILE */
@media (max-width: 768px){
    .container{
        width: min(100% - 32px, var(--container));
    }

    /* Titles */
    .section-header{
        margin-bottom: 56px;
    }

    .section-header h2{
        font-size: clamp(2rem,8vw,2.8rem);
    }

    /* Hero */
    .hero-text h1{
        font-size: clamp(2.7rem,11vw,4rem);
    }

    .hero-text h2{
        justify-content: center;
        font-size: 1.35rem;
    }

    .hero-text p{
        font-size: 1rem;
    }

    .hero-image img{
        max-width: 100%;
    }

    /* About */
    .about-photo img{
        max-width: 320px;
    }

    .about-stats{
        grid-template-columns: 1fr;
    }

    /* Skills */
    .skills-grid{
        grid-template-columns: 1fr;
    }

    /* Projects */
    .projects-slider{
        gap: 14px;
    }

    .slider-btn{
        width: 46px;
        height: 46px;
    }

    .project-card{
        flex: 0 0 100%;
    }

    /* Experience */
    .timeline-title{
        font-size: 1.6rem;
    }

    .timeline-item{
        min-width: 280px;
    }

    /* Contact */
    .contact-cards{
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-content{
        padding: 60px 0;
    }
}


/* SMALL MOBILE */
@media (max-width: 480px){
    /* Sections */
    section{
        padding: 90px 0;
    }

    /* Hero */
    .hero-buttons{
        flex-direction: column;
    }

    .btn{
        width: 100%;
    }

    /* About */
    .about-photo img{
        max-width: 260px;
    }

    /* Cards */
    .skill-card,
    .project-card,
    .timeline-card,
    .contact-card,
    .stat-card{
        padding: 24px;
    }

    /* Timeline */
    .timeline-item{
        min-width: 250px;
    }
}

@media (hover: none){
    #menu-button{
        display:flex;
    }
}