@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.app {
  min-width: 600px;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.6%, 1fr));
  grid-auto-rows: 26.66vh;
}

@media screen and (max-height: 600px),
       screen and (max-width: 1050px) {
  .app {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    grid-template-rows: 20vh;
  }
}

header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 50px;
  font-weight: bold;
}

.app > div {
  font-weight: 600;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  text-align: center;
  padding: 20px 15px 5px;
}

/* .app > div:nth-child(2),
.app > div:nth-child(4),
.app > div:nth-child(6),
.app > div:nth-child(7) {
  padding: 20px 15px 15px;
}

.app > div:nth-child(8),
.app > div:nth-child(9),
.app > div:nth-child(11),
.app > div:nth-child(13) {
  padding: 20px 15px 5px;
} */

.app > div.image-container {
  padding: 0;
}

.app > div > span {
  font-size: 10px;
}

.app > div:nth-child(2) {
  background-color: #bfbda7;
}

.app > div:nth-child(3) {
  background-color: #fe4714;
}

.app > div:nth-child(6) {
  background-color: #847e96;
}

.app > div:nth-child(7) {
  background-color: #d0ff71;
}

.app > div:nth-child(8) {
  background-color: #993333;
}

.app > div:nth-child(9) {
  background-color: #3aaafa;
}

.app > div:nth-child(11) {
  background-color: #41907a;
}

.app > div:nth-child(13) {
  background-color: #E3C4E5;
}

.app > div > span:nth-child(1) {
  
}

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