.intro {
    display: grid;
    grid-template-columns: 4fr 6fr;
    row-gap: 1rem;
    column-gap: 1rem;
    grid-template-areas:
        "img writing";
    background-color: #fcf7d7;
}

.special-dishes {
    background-color: #e2dec1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
}

.dish {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto 0.5rem auto 0;
}

.dishimg {
    height: 300px;
    background-color: #fcf7d7;
    margin-bottom: 1rem;
}

.reserve {
    background-color: #fcf7d7;
    display: flex;
    justify-content: space-around;
}

a.button {
    text-decoration: none;
    display: inline-block;
    background-color: #0095fd;
    border-radius: 1rem;
    padding: 1rem;
    color: #fcf7d7;
    font-weight: bold;
}

.section {
    /* border: 2px red solid; */
    padding: 1rem;
}

.about-image {
    grid-area: img;
    /* margin-left: 10%; */
}

.about-section {
    grid-area: writing;
    font-weight: 200;
   /* border: 2px black solid; */
}

@media screen and (max-width: 800px) and (min-width: 400px) {
    .about-image {
        grid-area: img;
        /* margin-left: 10%; */
        width: 20%;
    }
}

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

    .about-image {
        grid-area: img;
        /* margin-left: 10%; */
        width: 150px;
    }

    .special-dishes {
        grid-template-columns: 1fr;
        grid-template-areas:
            "dish"
            "dish"
            "dish";
    }

    .dish {
        grid-area: dish;
    }
}