.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 100%;
  height: 100%;
  min-height: 1200px;
  grid-gap: 10px;
}

.grid-item {
  position: relative;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}

@media (max-width: 768px) {
  .grid-item7,
  .grid-item8 {
      display: none;
  }
}

/* Specific grid item styles for layout */
.grid-item1 { grid-column: 1 / 4; grid-row: 1 / 2; }
.grid-item2 { grid-column: 1 / 2; grid-row: 2 / 5; }
.grid-item3 { grid-column: 1 / 5; grid-row: 5 / 6; }
.grid-item4 { grid-column: 2 / 4; grid-row: 2 / 5; }
.grid-item5 { grid-column: 4 / 6; grid-row: 1 / 3; }
.grid-item6 { grid-column: 4 / 5; grid-row: 3 / 5; }
.grid-item7 { grid-column: 5 / 6; grid-row: 3 / 6; }
.grid-item8 { grid-column: 6 / 8; grid-row: 1 / 6; }

@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 5px;
  }

  .grid-item1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .grid-item2 { grid-column: 3 / 5; grid-row: 1 / 2; }
  .grid-item3 { grid-column: 1 / 3; grid-row: 2 / 3; }
  .grid-item4 { grid-column: 3 / 5; grid-row: 2 / 3; }
  .grid-item5 { grid-column: 1 / 3; grid-row: 3 / 4; }
  .grid-item6 { grid-column: 3 / 5; grid-row: 3 / 4; }
  .grid-item7 { grid-column: 1 / 3; grid-row: 4 / 5; display: block; }
  .grid-item8 { grid-column: 3 / 5; grid-row: 4 / 5; display: block; }
}