@media screen and (max-width: 1480px) {

    .containerNarrow {
        margin: 0 auto;
        padding-left: 3.75rem;
        padding-right: 3.75rem;
    }

    .containerWide {
        padding-left: 3.75rem;
        padding-right: 3.75rem;
    }

    .menu {
        gap: 1rem;
    }
    
    .socials {
        gap: 1rem;
    }
    
    /* ------------------- work ------------------- */

    main {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;    
        gap: 7.5rem;
    }

    /* ------------------- other ------------------- */

    .other {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;
        gap: 5rem;
        flex-direction: column;
    }

    .other h1 {
        text-align: center;
    }

    .otherRow {
        gap: 5rem;
    }

    /* ------------------- foot ------------------- */
    .mail {
        padding-top: 12.5rem;
        padding-bottom: 12.5rem;
    }

    .sphere {
        bottom: 5.9375rem;
    }
}

@media screen and (max-width: 1024px) {

    .containerNarrow {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .containerWide {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    /* ------------------- header ------------------- */
    .topBar {
        padding-top: 2rem;
        padding-bottom: 2rem; 
    }

    .openMenuTopBar {
        padding-top: 2rem;
        padding-bottom: 2rem; 
    }

    .hamburger {
        display: initial;
    }

    .socials {
        display: none;
    }

    .menu {
        display: none;
    }

    .logo {
        width: 9.375rem;
        height: 2.0625rem;
    }

    /* ------------------- work ------------------- */
    .projectRow {
        flex-direction: column;
        gap: 7.5rem;
    }

    .projectRight {
        padding-top: 0;
    }

    .category svg{
        width: 1.5rem;
    }

    .category {
        gap: 0.5rem;
    }
    
    /* ------------------- other ------------------- */
    .other {
        display: none;
    }
    
    .otherMobile {
        display: flex;
    }

    /* ------------------- foot ------------------- */
    .mail {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;
    }

    .name {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .sphere {
        bottom: 3.375rem;
        width: 9.375rem;
        height: 15.25rem;
    }
}

@media screen and (max-width: 720px) {
    
    .containerNarrow {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .containerWide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    model-viewer {
        width: 100%;
        height: 60%;
        position: absolute; 
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
    
    .topBar {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-right: 0.63rem;
    }

    .openMenuTopBar {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-right: 0.63rem;
    }

    .logo {
        width: 7.5rem;
        height: 1.625rem;
    }

    .headContent {
        padding-bottom: 9rem;
    }

    .showreel {
        width: 7.5rem;
        height: auto;
    }

    /* ------------------- work ------------------- */
    .projectRow {
        gap: 4rem;
    }

    main {
        padding-bottom: 5rem;
        padding-top: 5rem;
        gap: 4rem;
    }

    .projectRight {
        gap: 1.5rem;
    }

    .projectLeft {
        gap: 1.5rem;
    }

    .projectLogos img{
        width: 6.25rem;
        height: 6.25rem;
    }

    /* -------------------other ------------------- */

    .otherRow {
        gap: 3rem;
    }

    .copy {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
        gap: 1rem;
    }

    .sphere {
        bottom: 1.375rem;
        width: 7rem;
        height: 11.3125rem;
     }

}