<div class="gallery">
    <a href="https://unsplash.com/@jeka_fe" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Jessica Felicio" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Jessica Felicio</figcaption>
      </figure>
    </a>

    <a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1504834636679-cd3acd047c06?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Oladimeji Odunsi" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
      </figure>
    </a>

    <a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1542513217-0b0eedf7005d?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Alex Perez" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
      </figure>
    </a>
  
    <a href="https://unsplash.com/@aiony" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1526413232644-8a40f03cc03b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Hikiapp" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Aiony Haust</figcaption>
      </figure>
    </a>
    
    <a href="https://unsplash.com/@von_co" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1535295972055-1c762f4483e5?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Ivana Cajina" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Ivana Cajina</figcaption>
      </figure>
    </a>

    <a href="https://unsplash.com/@caiquethecreator" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1505151228723-18d0f726f3b1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Caique Nascimento" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Jeffery Erhunse</figcaption>
      </figure>
    </a>
  
    <a href="https://unsplash.com/@marilezhava" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1495649904698-0f3670bdf61f?q=80&w=1934&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Mari Lezhava" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Mari Lezhava</figcaption>
      </figure>
    </a>
    
    <a href="https://unsplash.com/@suadkamardeen" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1627388020481-4330ab86d091?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Ethan Haddox" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Suad Kamardeen</figcaption>
      </figure>
    </a>

    <a href="https://unsplash.com/@ethanhaddox" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1517462964-21fdcec3f25b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Amir Geshani" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Ethan Haddox</figcaption>
      </figure>
    </a>
  
    <a href="https://unsplash.com/@nixcreative" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1593501273289-354b4fcf3add?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Tyler Nix" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Tyler Nix</figcaption>
      </figure>
    </a>

    <a href="https://unsplash.com/@majestical_jasmin" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1619378607926-710cb2d2f9a3?q=80&w=1952&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Jasmin Chew" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Jasmin Chew</figcaption>
      </figure>
    </a>
    
    <a href="https://unsplash.com/@dimadallacqua" target="_blank" class="gallery__link">
      <figure class="gallery__thumb">
        <img src="https://images.unsplash.com/photo-1586245895595-395fb6ffd945?q=80&w=1980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Portrait by Dima DallAcqua" class="gallery__image">
        <figcaption class="gallery__caption">Portrait by Dima DallAcqua</figcaption>
      </figure>
    </a>
</div>

$tablet: 768px;
$desktop: 1024px;
$desktopLarge: 1440px;

@mixin breakpoint($point) {
  @if $point == tablet {
    @media (min-width: $tablet) {
      @content;
    }
  }
  @if $point == desktop {
    @media (min-width: $desktop) {
      @content;
    }
  }
   @if $point == desktopLarge {
    @media (min-width: $desktopLarge) {
      @content;
    }
  }
}

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 5px;
  transition: .3s;
  
  @include breakpoint(tablet) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include breakpoint(desktop) {
    grid-template-columns: repeat(4, 1fr);
  }
  
  @include breakpoint(desktopLarge) {
    grid-template-columns: repeat(6, 1fr);
  }
  
  &:hover &__image {
    filter: grayscale(1);
  }
  
  &__link {
    overflow: hidden;
    height: 400px;
    max-height: 400px;
    
    &:hover {
      .gallery__image {
        filter: grayscale(0);
      }
      
      .gallery__caption {
        opacity: 1;
      }
    }
  }
  
  &__thumb {
    position: relative;
    height: 100%;
  }
  
  &__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  &__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 25px 15px 15px;
    width: 100%;
    font-family: 'Helvetica', sans-serif;
    font-size: 14px;
    color: white;
    opacity: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
    transition: .3s;
  }
}