Instagram embed

main.js

var request = new XMLHttpRequest();
    request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token={% TOKEN %}&count=8', true);

    request.onload = function(container) {
      if (request.status >= 200 && request.status < 400) {
      // Success!
        var data = JSON.parse(request.responseText);
        for (var i=0;i < data.data.length;i++) {
          var container = document.getElementById('instagram-feed');
          var imgURL = data.data[i].images.low_resolution.url;
          var imgLink = data.data[i].link;
          console.log(imgURL);
          console.log(imgLink);
          var div = document.createElement('a');
            div.setAttribute('class','thumbnail');
            div.setAttribute('href', imgLink);
            div.setAttribute('target', '_blank');
            container.appendChild(div);
            var img = document.createElement('img');
            img.setAttribute('src',imgURL);
            div.appendChild(img);
        }

        console.log(data);
      } else {
      }
    };
    request.onerror = function() {
    // There was a connection error of some sort
    };
    request.send();

main.scss

#instagram-feed {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;

  .thumbnail {
    width: calc(12.5% - 5px);
    margin-bottom: 5px;
    height: 146.75px;
  }

  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 1223.98px) {
    .thumbnail {
      height: 121.75px;
    }
  }

  @media screen and (max-width: 1023.98px) {
    .thumbnail {
      height: 121.33px;
      width: calc(16.6666% - 5px);
    }

    .thumbnail:nth-child(n + 7) {
      display: none;
    }
  }

  @media screen and (max-width: 767.98px) {
    .thumbnail {
      width: calc(33.3333% - 3px);
      margin-bottom: 5px;
      height: 152.98px;
    }
  }

  @media screen and (max-width: 480.98px) {
    .thumbnail {
      height: 33vw;
    }
  }
}