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

/* GRID STYLING */
.gallerygrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.gallerygrid .thumb {border-radius: 5px; overflow: hidden;}

/* SLIDER STYLING */
.galleryslider {padding: 0 40px; margin: 0 0 40px 0;}
.galleryslider .thumb {margin: 0 5px 0 0; border-radius: 5px; overflow: hidden;}
.galleryslider .slick-prev {position: absolute; top: 50%; left: 15px; width: 40px; height: 40px; background: var(--primarycolor-400); color: #ffffff; cursor: pointer; padding: 0; margin: 0; outline: none; border: none; z-index: 20; transform: translate(0, -50%); border-radius: 50vh;}
.galleryslider .slick-prev:after {content: "\f104"; display: block; position: absolute; top: 50%; left: 50%; color: #ffffff; font-family: FontAwesome; transform: translate(-50%, -50%); font-size: 160%; padding: 0 3px 0 0;}
.galleryslider .slick-next {position: absolute; top: 50%; right: 15px; width: 40px; height: 40px; background: var(--primarycolor-400); color: #ffffff; cursor: pointer; padding: 0; margin: 0; outline: none; z-index: 20; transform: translate(0, -50%); border-radius: 50vh;}
.galleryslider .slick-next:after {content: "\f105"; display: block; position: absolute; top: 50%; left: 50%; color: #ffffff; font-family: FontAwesome; transform: translate(-50%, -50%); font-size: 160%; padding: 0 0 0 3px;}
.galleryslider .slick-list {border-radius: 5px; overflow: hidden;}
.galleryslider .slick-slide {margin: 0 5px;}
.galleryslider, .galleryslider .slick-slide, .galleryslider .slick-slide div, .galleryslider .slick-slide div div {max-height: max-content; height: 100%!important; vertical-align: top;}
.galleryslider .slick-next, .galleryslider .slick-prev {transition: all 0.2s ease;}
.galleryslider .slick-next:hover, .galleryslider .slick-prev:hover {background: var(--primarycolor-200);}

/* POPUP STYLING */
.gallery.gallerypopup {margin-top: 40px; border-radius: 10px; overflow: hidden;}
.gallery.gallerypopup .image {overflow: hidden;}
.gallerypopup a img {transition: all 0.4s ease;}
.gallerypopup a {text-decoration: none; color: var(--white);}
.gallerypopup a:hover img {transform: scale(1.1);}
.gallerypopup .text {padding: 20px; background: var(--primarycolor-400); color: var(--white);}
.gallery.gallerypopup .title-text {font-size: 1.4rem;}
.gallerypopup a .text i {transition: all 0.2s ease;}
.gallerypopup a:hover .text i {margin-left: 5px;}

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

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