grid-4-column-area-media-queries.scss

// For all @media rules, see http://chnsa.ws/1a5
@media (min-width: 992px) and (max-width: 1199px) {
  // Bootstrap 3 MD Breakpoint ONLY
  .creatures-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-gap: 0 25px;

    .img-4 {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      margin-top: 1.5em;
    }

    .desc-4 {
      grid-row: 4 / 5;
      grid-column: 2 / 3;
    }
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  // Bootstrap 3 SM Breakpoint ONLY
  .creatures-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-gap: 0 25px;

    .img-3 {
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      margin-top: 1.5em;
    }

    .img-4 {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      margin-top: 1.5em;
    }
  }
}

@media (max-width: 767px) {
  // Bootstrap 3 XS Breakpoint only
  .creatures-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    grid-gap: 0;

    .desc-1 {
      grid-row: 2 / 3;
      margin-bottom: 1.5em;
    }

    .desc-2 {
      grid-row: 4 / 5;
      margin-bottom: 1.5em;
    }

    .desc-3 {
      grid-row: 6 / 7;
      margin-bottom: 1.5em;
    }
  }
}