styles-media.css

@media (max-width: 1150px) {
    :root {
        --body-width: 85%;
    }

    .section1-navigation {
        height: 72px;
    }
    .section1-logo {
        padding: 0px;
        margin: 24px 0px;
    }
    .section1-logo h1 {
        font-size: 60px;
    }
    
    .section1-links {
    background-color: rgb(13, 17, 23);
    padding: 0px;
    margin-right: 0px;
    bottom: 0px;
    position: fixed;
    right: 0px;
    top: 72px;
    flex-direction: column;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    height: 100%;
    z-index: 5;
    width: 100vw;
    gap: 40px;
    transform: translateX(100vw);
    transition: all 0.6s cubic-bezier(0.82, 0.085, 0.395, 0.895) 0s;
    }
    .sb1-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        margin-right: 140px;
    }
    .section1-column {
        align-items: flex-start;
    }
    .sb1-right {
        margin-left: 40px;
        gap: 20px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .hamburger-icon {
        width: auto;
        height: 72px;
        padding: 0px;
        background-color: transparent;
        border: 0px;
        display: initial !important;
    }
    .hamburger-icon::before {
        content: url(assets\icons\hamburger.svg);
        width: auto;
        height: 72px;
    }

    .sb-body-white {
        transform: translateY(0);
        opacity: 1;
        transform: scale(1);
    }
    .sb2-body-white {
        grid-template-columns: repeat(1, 1fr);
    }
    .body1 p, h2 {
        font-size: 50px;
    }
    .body1 .sb2-body-black p {
        font-size: 25px;
    }
    .sb2-body-black {
        grid-template-columns: repeat(1, 1fr);
    }
    .img-container {
        min-height: 550px;
    }

    .sb2-body-hi {
        grid-template-columns: repeat(1, 1fr);
    }
    .reveal {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }


    .body-shop {
        display: grid;
        gap: 50px;
    }
    .body-shop img {
        height: 650px;
    }
    .shop-card:hover > img {
        height: 450px;
    }
    .body-shop, .body-shop p, .body-shop li {
        font-size: 50px !important;
        margin: 50px 0;
    }
    .shop-card {
        height: 800px;
    }
    .shop-card:hover {
        height: 1090px;
    }
}