* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
  }
  
  .gallery {
    display: grid;
    grid-template-columns: repeat(8, minmax(10px, 1fr));
    grid-template-rows: repeat(4, 10vw);
    grid-gap: 16px;
    background-color: #0d420d;
    padding: 16px;
  }
  
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.5s;
  }
  
  .img:hover {
    opacity: 1;
  }
  
  .img-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  
  .img-2 {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
  }
  
  .img-3 {
    grid-column: 6 / 7;
    grid-row: 1 / 2;
  }
  
  .img-4 {
    grid-column: 7 / 9;
    grid-row: 1 / 3;
  }
  
  .img-5 {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }
  
  .img-6 {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
  }
  
  .img-7 {
    grid-column: 6 / 7;
    grid-row: 2 / 4;
  }
  
  .img-8 {
    grid-column: 5 / 6;
    grid-row: 3 / 5;
  }
  
  .img-9 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  
  .img-10 {
    grid-column: 3 / 5;
    grid-row: 4 / 5;
  }
  
  .img-11 {
    grid-column: 6 / 7;
    grid-row: 4 / 5;
  }
  
  .img-12 {
    grid-column: 7 / 9;
    grid-row: 3 / 5;
  }