/* GLOBAL RESPONSIVE LAYOUT */

.container {
    width: min(92%, 900px);
    margin-inline: auto;
}


/* TABLET */

@media (min-width: 768px) {

    /* HERO */

    .hero__content {
        padding: 2rem 0 11rem;
    }

    .hero__image img {
        width: min(42vw, 320px);
    }

    .hero__image::before {
        width: min(50vw, 370px);
    }

    .hero__buttons {
        flex-direction: row;
        align-items: center;
    }

    .hero__description {
        max-width: 60ch;
    }


    /* ABOUT */

    .about-content {
        max-width: 65ch;
    }


    /* SKILLS */

    .skills-list,
    .skills-track {
        gap: 2.5rem;
    }


    /* PROJECTS */

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


    /* ENGAGED */

    .engaged-container {
        flex-direction: row;
        text-align: left;
    }

    .engaged-content img {
        width: 90px;
    }


    /* FOOTER */

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

}


/* DESKTOP */

@media (min-width: 1024px) {

    /* NAVBAR */

    .nav {
        gap: 2rem;
    }

    .nav__toggle {
        display: none;
    }

    .nav__menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        margin-left: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .nav__menu a {
        padding: 0;
        color: var(--clr-text-light);
    }

    .nav__menu a:hover,
    .nav__menu a:focus {
        color: var(--clr-primary);
        background: transparent;
        transform: none;
    }

    .nav__menu-cta {
        display: none;
    }

    .nav__cta {
        display: inline-flex;
        padding: .75rem 1.25rem;
        font-size: .9rem;
        border-radius: 12px;
    }

    html.menu-open,
    body.menu-open {
        overflow: auto;
    }

    body.menu-open main,
    body.menu-open footer {
        filter: none;
    }

    body.menu-open::before {
        display: none;
    }

    /* HERO */

    .hero {
        padding-top: 72px;
    }

    .hero__content {
        min-height: calc(100vh - 72px);
        padding: 0 0 9rem;
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
        column-gap: 4rem;
    }

    .hero__text {
        order: 1;
    }

    .hero__image {
        order: 2;
        justify-self: center;
        margin-bottom: 0;
    }

    .hero__image img {
        width: min(34vw, 340px);
    }

    .hero__image::before {
        width: min(38vw, 420px);
    }

    .hero__title {
        font-size: clamp(4rem, 7vw, 5.5rem);
    }

    .hero__subtitle {
        font-size: 1.35rem;
    }

    .hero__description {
        max-width: 58ch;
    }

    .hero__buttons {
        justify-content: flex-start;
    }

    .hero__socials {
        justify-content: flex-start;
    }


    /* ABOUT */

    .about {
        padding: 6rem 0;
    }

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


    /* SKILLS */

    .skills {
        padding: 6rem 0;
    }

    .skill-item {
        width: 100px;
        height: 100px;
    }

    .skill-item img {
        width: 68px;
        height: 68px;
    }


    /* PROJECTS */

    .projects {
        padding: 6rem 0;
    }

    .projects-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }


    /* ENGAGED */

    .engaged {
        padding: 4.5rem 0;
    }

    .engaged-container {
        gap: 3rem;
    }

    .engaged-title {
        font-size: 1.8rem;
    }

}