@use '../base' as *;

/* -------------------------------- 

File#: _1_adv-gallery
Title: Advanced Gallery
Descr: Advanced image gallery template
Usage: codyhouse.co/license

-------------------------------- */

.adv-gallery {
  position: relative;
  z-index: 1;
}

.adv-gallery__img {
  width: 100%;
  display: block;
  object-fit: cover;
}

// CSS Grid fallback
.adv-gallery__grid {
  > * {
    margin-bottom: var(--space-md);
  }

  @include breakpoint(md) {
    > :nth-child(1), > :nth-child(2), > :nth-child(3) {
      width: 32%;
      float: left;
    }

    > :nth-child(1), > :nth-child(2) {
      margin-right: 2%;
    }

    > :nth-child(4) {
      clear: both;
    }
  }
}

// if CSS Grid = supported
@supports (grid-area: auto) {
  .adv-gallery__grid {
    display: grid;
    grid-gap: var(--space-md);

    > * { // fallback reset
      margin: 0 !important;
      width: auto !important;
      float: none !important;
    }
  }

  @include breakpoint(md) {
    .adv-gallery__grid {
      grid-template-columns: repeat(12, 1fr);
  
      > :nth-child(1) {
        grid-column: span 5;
      }
  
      > :nth-child(2) {
        grid-column: span 7;
      }
  
      > :nth-child(3) {
        grid-column: span 9;
      }
  
      > :nth-child(4) {
        grid-column: span 3;
      }
    }
  }

  @include breakpoint(lg) {
    .adv-gallery__grid {
      grid-gap: var(--space-sm);
      grid-template-rows: repeat(12, 50px);
  
      > :nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1 / 7;
      }
  
      > :nth-child(2) {
        grid-column: 1 / 4;
        grid-row: 7 / -1;
      }
  
      > :nth-child(3) {
        grid-column: 4 / 11;
        grid-row: 1 / -1;
      }
  
      > :nth-child(4) {
        grid-column: 11 / 13;
        grid-row: 1 / -1;
      }
    }

    .adv-gallery__img {
      height: 100%;
    }
  }
}