$dark: #19191c;
$lessDark: #303035;
$gutter: 16px;
$minWidth: 320px;
$maxWidth: 1fr;

/*
1. 1:1 - 100%
2. 16:9 - 56.25%
3. 4:3 - 75%
4. 3:2 - 66.66%
5. 8:5 - 62.5%
*/
$ratio: 56.25%;

body {
  padding: 16px;
  background: $dark;
}

ul {
  display: grid;
  grid-gap: $gutter;
  /*
  Minimum Width = 368px
  Maximum Width = 1fr i.e full width
  A card will wrap to next row if the browser can not fit cards with their minimum width
  
  auto-fill - this will try to fill all the columns or leave an empty columns if there aren't enough cards
  */
  grid-template-columns: repeat(auto-fill, minmax($minWidth, $maxWidth));

  // auto-fit - this will fit all the cards in single row if the browser's width is equal to width of all the cards combine + gap
  // grid-template-columns: repeat(auto-fit, minmax($minWidth, $maxWidth));
  
  @media screen and (max-width: 320px) {
    grid-template-columns: repeat(auto-fill, minmax(100%, $maxWidth));
  }
}

li {
  background: $lessDark;
  padding-top: $ratio;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  img {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
  }
}