main {
    padding-bottom: 12rem;
}

.card {
    text-align: center;
}

h3 {
    margin-bottom: 1.5em;
}

h3 span {
    font-size: clamp(1.5rem, 2.5vw, 1.6rem);
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    letter-spacing: .05em;
    color: var(--c-font);
}

#lunch {
    margin-top: 8rem;
}

#lunch .small {
    margin-top: .5em;
}

#lunch .card {
    padding: 2rem 0;
}

#lunch li:has(h3):nth-child(n+2) {
    border-left: 1px dashed var(--c-line);
}

#lunch li:has(h3) {
    width: 33%;
    padding-block: 4rem;
}

#lunch .flex .flex {
    flex-direction: column;
    gap: 4rem;
}

#lunch li img {
    display: block;
    margin-inline: auto;
    padding-inline: 2rem;
    height: 80px;
    margin-bottom: .8em;
}

#lunch li p {
    font-size: clamp(1.4rem, 2.5vw, 1.6rem);
}

#lunch-pasta {
    margin-top: 8rem;
}

#option {
    margin-top: 6rem;
}

#lunch-pasta .card,
#option .card {
    padding-block: 6rem;
}

#lunch-pasta .card>div:last-child {
    margin-top: 6rem;
}

#lunch-pasta h3 span {
    display: block;
    color: var(--c-main);
    margin-top: .5rem;
}

#lunch-pasta >p {
    margin-top: .5em;
}

#lunch-pasta li {
    width: 31%;
}

#lunch-pasta li img{
    margin-bottom: 1rem;
}

#option li {
    width: 23%;
}

#lunch-pasta li>span,
#option li>span {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .5em;
    background-color: var(--c-bg);
    aspect-ratio: 1/1;
    border-radius: 50%;
}

#lunch-pasta div p:first-child,
#option div p:first-child {
    margin-top: 1em;
}

#option .small {
    line-height: 1.5em;
}

@media screen and (max-width:992px) {
    main {
        padding-bottom: 8rem;
    }

    h3 {
        margin-bottom: 1em;
    }
    
    #lunch {
        margin-top: 6rem;
    }

    #lunch .small {
        display: block;
        margin-left: 0;
        margin-top: .2em;
    }

    #lunch .flex .flex {
        gap: 2rem;
    }

    #lunch li img {
        margin-bottom: .3em;
    }

    #lunch-pasta .flex,
    #option .flex {
        flex-wrap: wrap;
        row-gap: 5rem;
        max-width: 500px;
        margin-inline: auto;
    }

    #lunch-pasta li {
        width: 75%;
        margin-inline: auto;
    }

    #option li {
        width: 47%;
    }
}