section {
    scroll-margin-top: var(--navbar-height);
}

/* WELCOME SECTION STYLES */
/* ################################ */

#welcome_content_tiles {
    display: grid;
    gap: 3rem;
}

@media (max-width: 999px) {
    #welcome_content_tiles { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) and (max-width: 1649px) {
    #welcome_content_tiles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1650px) {
    #welcome_content_tiles { grid-template-columns: 1fr 1fr 1fr; }
}

#welcome_content_tiles > div{
    background-color: #f0f0f0;
    font-size: 1.75rem;
    border-radius: 1rem;
    border: 2px solid gray;
    padding: 1rem;
}

#welcome_content_tiles > div > h2{
    font-size: 2.25rem;
    font-weight: bold;
    margin-top: 1rem;
}

#welcome_content_tiles > div > h3{
    margin: 1rem 0;
    font-weight: normal;
    text-decoration: underline;
}

#welcome_content_tiles > div > ul{
    list-style: none;
    padding-left: 0;
}

#menu_link {
    display: inline-block;
    padding: 1rem 2rem;
    margin: 0rem 0 1rem 1rem;
    border: 2px solid var(--nav-color);
    border-radius: 6px;
    
    color: black;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    #menu_link:hover {
        background-color: #ffba53;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
}

#menu_link.clicked {
    background-color: #ffba53;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.vertical_centered_items{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vertical_centered_items > div{
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 400px) {
    .vertical_centered_items > div{
    flex-direction: column;
  }
}

#opening_hours li,
#delivery_hours li {
    display: grid;
    padding: 0.2rem 0em;
    grid-template-columns: calc(1.5rem*8) auto;
}

#lunch_deals_details li{
    display: grid;
    padding: 0.2rem 0em;
    grid-template-columns: auto auto;
}


/* IMPRESSIONS SECTION STYLES */
/* ################################ */

@media (max-width: 749px) {
    #impressions > div > ul { --grid-columns: 2; }
}
@media (min-width: 750px) and (max-width: 1499px) {
    #impressions > div > ul { --grid-columns: 3; }
}
@media (min-width: 1500px) {
    #impressions > div > ul { --grid-columns: 4; }
}

#impressions > div > ul{
    --img-size: clamp(100px, 22.727vw + 27.272px, 300px);
    --pola-size: calc(var(--img-size) + 2rem);
    display: grid;
    height: auto;
    grid-template-columns: repeat(var(--grid-columns), var(--pola-size));
    grid-auto-rows: 1fr;
    justify-self: center;
    gap: 1rem;
    list-style: none;
    padding-left: 0;
}

.polaroid_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: calc(100% - 2rem);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 6px;
    background-color: white;
    box-shadow: 0 4px 8px #0003, 0 6px 20px #0003;
}

.polaroid_container > img{
    display: block;
    width: var(--img-size);
    height: auto;
}

.polaroid_caption {
    display: flex;
    height: 100%;
    align-items: center;
    text-align: center;
}


/* ABOUT US SECTION STYLES */
/* ################################ */


#about_us .content_of_section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 7rem;
}

@media (max-width: 800px) {
    #about_us .content_of_section { 
        flex-direction: column; 
        align-items: flex-start;
        gap: 5rem;
    }
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#img_us {
    --img_width: clamp(150px, 20.455vw + 54.546px, 300px);
    max-width: var(--img_width);
    border-radius: 6px;
    height: auto;
}