:root {
  --background: #200234;
  --secondary: #e775d8;
  --text: #ffffff;
}
body {
  margin: 20px;
  padding: 0;
  background: var(--background);
  color: var(--text);
}
.container {
  max-width: 760px;
  margin: auto;
  padding: 10px;
  border: tomato dashed 10px;
  background-color: var(--secondary);
  ;
}
.main-img img, .imgs img {
  width: 100%;
}
.imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}
/* Fade in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 1 forwards;
}

/* Media Queries */
/* At screens smaller than 760px */
@media (max-width: 760px) {
  .imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* At screens smaller than 320px */
@media (max-width: 320px) {
  .imgs {
    display: grid;
    grid-template-columns: 1fr;
  }
}