:root {
    /* Set fade in duration */
    --fade-time: 0.5s;
  }
  
  body {
    margin: 20px;
    padding: 0;
    background: #333;
  }
  
  .container {
    max-width: 760px;
    margin: auto;
    border: #fff solid 3px;
    background: #fff;
  }
  
  .main-img img,
  .imgs img {
    width: 100%;
  }
  
  .imgs {
    display: grid;
    
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 5px;
  }
  
  .imgs img {
    cursor: pointer;
    height: 1fr;
    width: 1fr;
    
  }
  img{
    border: blue
    solid 3px;
    
    
    background-color: yellow;
  }
  
  /* Fade in animation */
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  .fade-in {
    opacity: 0;
    animation: fadeIn var(--fade-time) ease-in 1 forwards;
  }
  
  /* Media Queries */
  @media(max-width: 600px) {
    .imgs {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
  }