.sketches-wrapper {
  overflow: hidden;
  padding-bottom: 4.5rem
}

.sketch {
  position: relative;
  vertical-align: top;
  width: 100%
}

.sketch a {
  display: block;
  overflow: hidden
}

.sketch-image {
  position: relative;
  padding-bottom: 66.6666666667%;
  width: 100%
}

.sketch-image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sketch-image img {
  opacity: 0;
  transition: opacity 1s ease;
}

.sketch-image img.is-loaded {
  opacity: 1;
}

.sketch-info {
  padding: .1rem;
  font-size: 1rem;
}

@media screen and (min-width: 30em) {
  .sketch {
      position:relative;
      vertical-align: top;
      width: 49%;
      display: inline-block
  }

  .sketches-wrapper {
      padding-left: .5rem
  }
}

@media screen and (min-width: 45em) {
  .sketches-wrapper {
      padding-left:0
  }

  .sketch {
      position: relative;
      vertical-align: top;
      width: auto;
      display: inline-block;
      width: 19%
  }

  .sketch-info {
      padding: 1rem;
  }

  .sketch-image {
      padding-bottom: 100%
  }
}

.ig-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.ig-modal.is-open {
  display: block;
}

.ig-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.ig-modal__panel {
  position: relative;
  max-width: 20rem;
  margin: 40vh auto 0 auto;
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.182);
}

.ig-modal__title {
  font-size: 1.5rem;
  margin: 0 0 .5rem 0;
}

.ig-modal__text {
  margin: 0 0 1.5rem 0;
  opacity: .9;
  line-height: 1.4;
}

.ig-modal__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

.ig-modal__btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: white;
  padding: .6rem .9rem;
  border-radius: .75rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ig-modal__btn--primary {
  background: white;
  color: #111;
  border-color: white;
}

@media screen and (min-width: 70em) {

}

@supports (display: grid) {
      .sketches:not(.sketches-list) {
          display:grid;
          grid-template-columns: repeat(3,1fr);
          grid-template-rows: auto;
          grid-column-gap: .625rem;
          grid-row-gap: .625rem
      }

      .sketches:not(.sketches-list) .sketch {
          overflow: hidden;
          width: auto
      }

      .sketches:not(.sketches-list) .sketches-wrapper {
          padding-bottom: 6rem
      }

      .sketches:not(.sketches-list) .sketch a {
          padding-bottom: 66.66%
      }

      .sketches:not(.sketches-list) .sketch-image {
          position: static;
          padding-bottom: 0
      }

      .sketches:not(.sketches-list) .sketch-info {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          left: 0;
          color: white;
          background: #30303094;
          z-index: 1;
          padding: 0.5rem;
          opacity: 0;
          -webkit-transition: opacity .3s;
          transition: opacity .3s;
          line-height: 1.4em
      }

      .sketches:not(.sketches-list) .sketch:hover .sketch-info {
          opacity: 0;
          display: none
      }

    .sketches:not(.sketches-list) .sketch[data-size="1x1"] {
          position: relative;
          grid-column: span 1;
          grid-row: span 1
      }


      .sketches:not(.sketches-list) .sketch[data-size="1x2"] {
          position: relative;
          grid-column: span 1;
          grid-row: span 2
      }

      .sketches:not(.sketches-list) .sketch[data-size="1x2"] a {
          padding-bottom: 133.33334%
      }

      .sketches:not(.sketches-list) .sketch[data-size="2x2"] {
          grid-column: span 2;
          grid-row: span 2
      }


      .sketches:not(.sketches-list) .sketch[data-size="3x3"] {
          grid-column: span 3;
          grid-row: span 3
      }

      .sketches:not(.sketches-list) .sketch[data-size="2x2"] a, 
      .sketches:not(.sketches-list) a,
      .sketches:not(.sketches-list) .sketch[data-size="3x3"] a {
          height: 100%
      }

  @media screen and (min-width:45em) {
      .sketches:not(.sketches-list) {
          grid-template-columns: repeat(6,1fr);
      }
  }

  @media screen and (min-width: 60em) {
      .sketches:not(.sketches-list) .sketch-info {

      }
       .sketches:not(.sketches-list) {
          grid-template-columns:repeat(6,1fr)
      }
  }

  @media screen and (min-width: 70em) {
      .sketches:not(.sketches-list) .sketch:hover .sketch-info {
          opacity:1;
          display: block
      }
  }

  @media screen and (min-width: 100em) {
      .sketches:not(.sketches-list) .sketch-info {

      }
       .sketches:not(.sketches-list) {
          grid-template-columns:repeat(6,1fr)
      }
  }

}