@media (max-width:960px) {
    
    .hero .wrapper {
        flex-direction: column;
    }
    .logo {
        margin: 0;
    }
    hero {
        max-width: none;
    }
    
    main ul {
        flex-direction: column;
    }
    li.card {
        width: 100%;
    }
}

@media (max-width:768px) {
    #menuIcon {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
        aspect-ratio: 1;
        padding: .5rem;
        box-sizing: border-box;
    }
    #menuIcon span {
        display: block;
        width: 100%;
        height: 5px;
        background: black;
        border-radius: 5px;
    }
    nav span, nav ul {transition: .2s;}
    nav ul {
        position: fixed;
        z-index: 2;
        top: calc((54px * 1.25) + .5px);
        right: 0;
        translate: 125%;
        flex-direction: column;
        scale: 1.5;
    }
    nav .button {height: 3rem;}
    nav li:not(:first-child) .button {
        background-color: var(--darker);
        color: white;
    }

    :checked ~ .top {transform: translateY(9px) translateX(0) rotate(45deg);}
    :checked ~ .middle {opacity: 0;}
    :checked ~ .bottom {transform: translateY(-11px) translateX(0) rotate(-45deg);}
    nav:has(:checked) ul {translate: -25%;}


    .hero {
        background-size: auto 100%;
    }

    
    .content .wrapper, footer .wrapper {
        flex-direction: column;
    }

    header .wrapper {
        flex-direction: row-reverse;
    }

    aside {
        min-width: 100%;
    }

    .toe {
        max-width: none;
        text-align: center;
    }
}