/* Responsive restaurant photo galleries. Kept in a dedicated stylesheet so
   gallery layout updates are not hidden by a cached site-wide style.css. */
.restaurant-photo-section {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 55px 0;
    overflow: hidden;
    background: #18181d;
    color: #fff;
}

.restaurant-photo-section .container {
    box-sizing: border-box;
    width: min(1170px, calc(100% - 30px));
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.restaurant-photo-section .restaurant-photo-heading {
    margin: 0 0 30px;
    text-align: center !important;
}

.restaurant-photo-grid {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.restaurant-photo-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(176, 143, 93, .65);
    background: #111;
}

.restaurant-photo-card img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
}

.restaurant-photo-card figcaption {
    padding: 12px 14px;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 17px;
    text-align: center;
}

/* Match the food cards immediately above the About-page gallery. */
#section-team .profile_pic figure {
    height: 220px;
    overflow: hidden;
}

#section-team .profile_pic figure img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 767px) {
    .restaurant-photo-section { padding: 42px 0; }
    .restaurant-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .restaurant-photo-card img { height: 180px !important; }
    #section-team .profile_pic figure { height: 180px; }
}

@media only screen and (max-width: 480px) {
    .restaurant-photo-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .restaurant-photo-card img { height: 210px !important; }
    #section-team .profile_pic figure { height: 210px; }
}
