.gallery {width: 100%; position: relative;}
.gallery img {width: 100%;}

.gallery h3 {border-bottom: 1px solid var(--primarycolor-400); max-width: max-content; margin: 0 auto 20px;}

/* GRID STYLING */
.gallerygrid {width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.gallerygrid .thumb {width: 100%; margin: 0;}

/* SLIDER STYLING */
.galleryslider {margin-bottom: 60px;}
.galleryslider .swiper-button-next, .galleryslider .swiper-button-prev {width: 50px; height: 50px; display: flex; background: var(--primarycolor-500); z-index: 10; border-radius: 50%; color: var(--white); cursor: pointer; padding: 0; right: 10px; font-size: 1.4rem; transition: all 0.2s ease;}
.galleryslider .swiper-button-next:hover, .galleryslider .swiper-button-prev:hover {background: var(--primarycolor-400);}
.galleryslider .swiper-button-next:hover i, .galleryslider .swiper-button-prev:hover i {color: var(--white);}
.galleryslider .swiper-wrapper {overflow: visible!important;}

/* POPUP STYLING */
.gallerypopup .name {padding: 20px; background: #ffffff;}
.gallerypopup .name h4 {padding: 0;}
.gallerypopup .name p {padding: 0; font-weight: 700;}

@media screen and (max-width: 980px) {
  .gallerygrid {grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 640px) {
  .gallerygrid {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 420px) {
  .gallerygrid {gap: 10px;}
}