@media (min-width:640px) {
    .sm-100 {
        width: 100%;
    }

    .sm-50 {
        width: 50%;
    }

    .sm-33 {
        width: 33.3333%;
    }

    .sm-25 {
        width: 25%;
    }

    .sm-20 {
        width: 20%;
    }

    .sm-16 {
        width: 16.6666%;
    }
}

@media (max-width:768px) {
    header {
        height: auto;
    }
}
@media (min-width:768px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "pizza Beef Burger"
            "pizza Beef Burger"
            "pizza Beef Burger"
            "Levitation Beef Crispy"
            "Levitation Beef Crispy"
            "Levitation Beef Crispy"
            "Levitation Beef Lyulya"
            "Levitation Frittata Lyulya"
            "Levitation Frittata Lyulya"
            "Levitation Frittata Lyulya"
            "Levitation Frittata Lyulya"
            "Levitation Frittata Lyulya"
        ;
        gap: 20px;
    }

    

    .h-head {
        font-size: 80px;
    }

    .md-100 {
        width: 100%;
    }

    .md-50 {
        width: 50%;
    }

    .md-33 {
        width: 33.3333%;
    }

    .md-25 {
        width: 25%;
    }

    .md-20 {
        width: 20%;
    }

    .md-16 {
        width: 16.6666%;
    }
}

@media (min-width:1024px) {
    .lg-100 {
        width: 100%;
    }

    .lg-50 {
        width: 50%;
    }

    .lg-33 {
        width: 33.3333%;
    }

    .lg-25 {
        width: 25%;
    }

    .lg-20 {
        width: 20%;
    }

    .lg-16 {
        width: 16.6666%;
    }
}

@media (min-width:1280px) {
    .xl-100 {
        width: 100%;
    }

    .xl-50 {
        width: 50%;
    }

    .xl-33 {
        width: 33.3333%;
    }

    .xl-25 {
        width: 25%;
    }

    .xl-20 {
        width: 20%;
    }

    .xl-16 {
        width: 16.6666%;
    }
}

@media (min-width:1536px) {
    .xxl-100 {
        width: 100%;
    }

    .xxl-50 {
        width: 50%;
    }

    .xxl-33 {
        width: 33.3333%;
    }

    .xxl-25 {
        width: 25%;
    }

    .xxl-20 {
        width: 20%;
    }

    .xxl-16 {
        width: 16.6666%;
    }
}