h1,
h2,
h3 {
    color: white;
    font-family: var(--font-title);
}

h3 {
    font-size: 2em;
    height: 1.2em;
}

span {
    font: 600 0.7em var(--font-text);
    padding: 0.5em;
    background-color: #F4F4F4;
    color: #333;
}

h2 {
    font-weight: lighter;
    font-size: 2.5em;
}

.banner-menu {
    width: 100%;
    height: 100vh;
    max-height: 700px;
    background-image:  linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)), 
    url(../../img/our-menu/waterlemon.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0 5%;
    display: grid;
    place-items: center;
    justify-content: left;
}

.banner-menu h1 {
    font-size: 4em;
    line-height: 1.2em;
    padding-bottom: 0.2em;
    color: var(--color-primary);
}
.banner-menu p {
    font-size: 1.2em;
    color: white;
    width: 70%;
}



.menu-section {
    width: 92%;
    margin: 1.8em auto;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gallery-container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(16, 10em);
    grid-template-areas:
        "item0 item2"
        "item0 item2"
        "item1 item2"
        "item1 item2"
        "item3 item2"
        "item3 item4"
        "item3 item4"
        "item5 item6"
        "item5 item6"
        "item5 item7"
        "item5 item7"
        "item5 item8"
        "item9 item8"
        "item9 item8"
        "item10 item10"
        "item10 item10";
    grid-gap: 1.8em 1.8em;
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    place-content: center;
}


#item-0 { grid-area: item0;}
#item-1 { grid-area: item1;}
#item-2 { grid-area: item2;}
#item-3 { grid-area: item3;}
#item-4 { grid-area: item4;}
#item-5 { grid-area: item5;}
#item-6 { grid-area: item6;}
#item-7 { grid-area: item7;}
#item-8 { grid-area: item8;}
#item-9 { grid-area: item9;}
#item-10 { grid-area: item10;}


.gallery-item {
    text-align: center;
    font-size: 20px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--duration-xxs) ease, transform .7s, filter var(--duration-xxs) ease-in-out;
    transform-origin: center center;
}

.gallery-item:hover img {
    transform: scale(var(--scale-m));
}

.cap {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    width: 100%;
    height: 100%;
}

#first-cap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0) 70%);
    z-index: 1; 
}

#second-cap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0) 70%);
    z-index: 1; 
}

.cap h3{
    color: var(--color-primary);
    z-index: 2;
}

.cap span{
    z-index: 2;
    max-width: 350px;
}

.bottom-left {
    bottom: 0;
    left: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.top-right {
    top: 0;
    right: 0;
    text-align: right;
}

.top-right span {
    align-self: end;
}

.top-center {
    top: 0;
    width: 100%;
}

#item-10 h3 {
    font-size: var(--font-size-section-title);
    color: var(--color-darkgray);
    padding-top: 1.5em;
}

/*///////////////// RESPOSIVE///////////////*/

@media (max-width: 1080px) {
    .gallery-container  {
        gap: clamp(var(--gap-s), 1vw, var(--gap-m));
    }
}


@media (max-width: 768px) {
    .gallery-container  {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(var(--gap-xxs), 1vw, var(--gap-xs));    
    }
    .cap{
        padding: 1em;
    }
    h3{
        font-size:  1.5em;
    }
}

@media (max-width: 480px) {
    .gallery-container  {
        grid-template-columns: repeat(1, 1fr);   
        grid-template-rows: auto;
        grid-template-areas: 
            "item0"
            "item1"
            "item2"
            "item3"
            "item4"
            "item5"
            "item6"
            "item7"
            "item8"
            "item9"
            "item10";
    }

}

@media (max-width: 375px) {
}