@media(max-aspect-ratio: 1/1) {

    h1 {
        font-size: 3.5rem;
    }

    h1.smaller {
    font-size: 3rem;
    }

    a.home {
        display: block;
        width: 80vw;
        margin-top: 1em;
        margin-left: 0;
        font-size: 2em;
        bottom: -5vh;
        position: relative;
    }

    .cols-3 {
        display: block;
        width: 80vw;
        bottom: 40vh;
    }

    .footer {
    }

    a.home:hover {
        transform: translateY(0);
    }

    .cols-4 {
        display: block;
        top: 0;
        margin-right: 10vw;
        width: 72vw;
    }

    .cols-4 div div {
        display: none;
    }

    .cols-4 div {
        padding-bottom: 0.15rem;
    }

    .hook {
        font-size: 1.1rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    .cols-4 div.transparent {
        margin-top: 1.5rem;
    }

    button {
        width: 40vw;
        margin-right: -1rem;
        margin-top: 5rem;
    }


    div.background {
        display: none;
    }

    h3 icon {
        top: 0.75rem;
        position: relative;
        display: inline-block;
    }
    
    

    h3 div {
        display: inline-block !important;
        text-align: center !important;
        z-index: 20;
        position: relative;
        width: auto !important;
        padding-left: 0.75rem !important;
    }

    h3 {
        top: 0.25rem;
        position: relative;
        cursor: pointer;
    }

    .id-card {
        display: block;
    }

    .card {
        margin-top: 5vh;
        padding: 1vh 4vw;
        width: 72vw;
        z-index: 10;
        position: relative;
    }


    .card .name {
        bottom: 2vh;
        position: relative;
        z-index: 20;
    }

    .card .photo img {
    width: 20vw;
    height: 20vw;
    }

    .header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .scroller .item div.label {
        font-size: 1rem;
        }
    
        .scroller .item {
            flex: 0 0 40vw;
        }
        
        .scroller .item div.logo {width: 40vw;height: 4rem;}
    
        .scroller .item div.logo {width: 40vw;height: 4rem;}
    
        .scroller .item div.logo img {max-width: 20vw;max-height: 3rem;} 
       
    
    
        @keyframes scroll {
            0% {transform: translateX(80vw);}
            100% {transform: translateX(-1080vw);}
        }
    
        .scroller  {
            animation-duration: 100s;
    
        }
    
        .group div {font-size: 1.25rem;}
    
        .group h3 icon {
            font-size: 2.5rem;
        }

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

        .grid .cell, .grid .cell h3 {
            font-size: 1.25rem;
        }

        
}


@media (max-aspect-ratio: 1 / 1) and (max-width: 499px) {
    a.home {
        font-size: 1.5rem;
        bottom: -15vh;
        width: 75vw;
    }

    .footer {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        height: 10vh;
        display: none;
    }

    .legal {
        display: none;
    }

    h1 {
        font-size: 2.5rem;
    }

    h1.smaller {
            font-size: 2.8rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h3 icon {
        font-size: 1.75rem;
        top: 0.5rem;
    }

    button {
        margin-top: 0;
        width: 50vw;
    }

    .hook {
        display: none;
    }

    .popup div.content {
        font-size: 1.1rem;
        margin-top: 1.5rem;
    }

    .card {
        padding-top: 1.5rem;
    }

    .card .name {
        font-size: 1.35rem;
    }

    .hook.force {
        display: block;
    }

    h2 {
        font-size: 1rem;
        display: none;
    }

    .footer a {width: 0.7rem;height: 0.6rem;margin-top: 0.15rem;}

    .footer a img {height: 1.5rem;top: -0.45rem;left: -0.4rem;}

    .scroller .item div.label {
    font-size: 1rem;
    }

    .scroller .item {
        width: 38vw;
        flex: 0 0 40vw;
        text-align: center;
        margin-bottom: 8vh;
        display: inline-block;
    }
    
    .scroller .item div.logo {width: 40vw;height: 4rem;}

    .scroller .item div.logo {width: 38vw;/* height: 4rem; */}

    .scroller .item div.logo img {max-width: 20vw;max-height: 3rem;} 
   


    @keyframes scroll {
        0% {transform: translateX(80vw);}
        100% {transform: translateX(-1080vw);}
    }

    .scroller  {
        animation: none;
        display: inline-block;
        white-space: unset;
        width: 80vw;
    }

    .group div {font-size: 1.25rem;}

    .group h3 icon {
        font-size: 2.5rem;
    }

    .web {
        display: none !important;
    }
}

@media(max-width: 1200px) {

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

    .cell {
        margin-bottom: 3rem;
    }
}


@media(max-width: 650px) {
    .web {
        display: none !importa;
    }
    .grid-narrow {grid-template-columns: repeat(1, 1fr);gap: 2rem;}
}