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

/* GRID STYLING */
.gallerygrid {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.gallerygrid .thumb {width: 100%; margin: 0; border-radius: 5px; border: 1px solid var(--black-200);}
.gallerygrid .thumb video, .gallerygrid .thumb img {border-radius: 5px;}

.gallerygrid {margin-block-end: 20px;}

/* SLIDER STYLING */
.galleryslider .slick-arrow {position: absolute; top: 50%; left: 10px; width: 40px; height: 40px; max-width: 100%; text-align: center; background: #000000; color: #ffffff; cursor: pointer; padding: 0; margin: 0; outline: none; border: none; z-index: 20; transform: translate(0, -50%); font-size: 1.25rem;}
.galleryslider .slick-next {left: unset; right: 10px;}
.galleryslider .slick-slide {margin: 0 10px;}
.galleryslider .slick-list {margin: 0 -10px;}

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

/* BASIC BREAKPOINTS */
@media screen and (max-width: 980px) {
  .gallerygrid {grid-template-columns: repeat(2, 1fr);}
  .galleryslider .slick-arrow {width: 30px; height: 30px; font-size: 1rem;}
  .galleryslider .slick-slide {margin: 0 5px;}
  .galleryslider .slick-list {margin: 0 -5px;}
}

@media screen and (max-width: 500px) {
  .gallerygrid {grid-template-columns: 1fr;}
  .galleryslider .slick-arrow {width: 30px; height: 30px; font-size: 1rem;}
  .galleryslider .slick-slide {margin: 0 5px;}
  .galleryslider .slick-list {margin: 0 -5px;}
}