@charset "utf-8";
/* =========================================================
  #worksByCategory
========================================================= */
.categoryContainer {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    max-width: var(--site-width);
}

.categoryElement {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 25rem;
    margin: 0.5rem;
    text-align: center;
}

.categoryElement img {
    max-width: 100%;
    height: auto;
}

.categoryElement h4 {
    display: block;
    font-size: 1.03rem;
}

@media (max-width: 959px) {
    .categoryContainer {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }
    
    .categoryElement {
        max-width: 100%;
        margin-bottom: 30px;
    }
    .categoryElement img {
        max-width: calc(80%);
    }

    .categoryElement h4 {
        mfont-size: 2rem;
    }
}
/* =========================================================
  #lightgallery
========================================================= */
.departmentContainer {
    max-width: var(--site-width);
    margin: 0 auto; /* Center the container */
    margin-bottom: 20px;
    padding: 20px; /* Add some padding for spacing */
}

#lightgallery1,
#lightgallery2,
#lightgallery3,
#lightgallery4,
#lightgallery5,
#lightgallery6,
#lightgallery7,
#lightgallery8 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#lightgallery1 a,
#lightgallery2 a,
#lightgallery3 a,
#lightgallery4 a,
#lightgallery5 a,
#lightgallery6 a,
#lightgallery7 a,
#lightgallery8 a {
    max-width: calc(25% - 20px);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1; /* Set a square aspect ratio */
}

#lightgallery1 img,
#lightgallery2 img,
#lightgallery3 img,
#lightgallery4 img,
#lightgallery5 img,
#lightgallery6 img,
#lightgallery7 img,
#lightgallery8 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and cover container */
}

#arts,
#society,
#family,
#education,
#culture,
#calligraphy,
#technology,
#news {
    font-size: 2rem; /* Set the font size for the heading */
    margin-bottom: 20px; /* Add some space between the heading and the gallery */
    color: var(--main-color-1);
    text-align: center;
    scroll-margin-top: 204px;
}



/* Media query for tablets */
@media screen and (max-width: 959px) {
.departmentContainer {
    margin-bottom: 5px;
    padding: 5px;
}

#lightgallery1,
#lightgallery2,
#lightgallery3,
#lightgallery4,
#lightgallery5,
#lightgallery6,
#lightgallery7,
#lightgallery8 {
    gap: 5px;
}

#lightgallery1 a,
#lightgallery2 a,
#lightgallery3 a,
#lightgallery4 a,
#lightgallery5 a,
#lightgallery6 a,
#lightgallery7 a,
#lightgallery8 a {
    max-width: calc(50% - 5px);
    aspect-ratio: 1; /* Set a square aspect ratio */
}

#arts,
#society,
#family,
#education,
#culture,
#calligraphy,
#technology,
#news {
    font-size: 1.5rem; /* Adjust font size for smaller screens */
    margin-bottom: 10px; /* Add some space between the heading and the gallery */
    scroll-margin-top: 120px;
}

}