.yhod-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  /* max-width: 1330px; */
  margin: 0 auto;
}

.yhod-item {
  background-color: #ccc1b7;
  font-size: 48px;
  text-transform: uppercase;

  padding-bottom: 136%;
}

.yhod-card {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.yhod-item:nth-child(12n + 1),
.yhod-item:nth-child(12n + 8) {
  grid-column: 1 /5;
}

.yhod-item:nth-child(12n + 2),
.yhod-item:nth-child(12n + 9) {
  grid-column: 5 /9;
}

.yhod-item:nth-child(12n + 3),
.yhod-item:nth-child(12n + 10) {
  grid-column: 9 / 13;
}

.yhod-item:nth-child(12n + 4) {
  grid-column: 1 /4;
}

.yhod-item:nth-child(12n + 5) {
  grid-column: 4 /7;
}

.yhod-item:nth-child(12n + 6) {
  grid-column: 7 / 10;
}

.yhod-item:nth-child(12n + 7) {
  grid-column: 10 / 13;
}

.yhod-item:nth-child(12n + 11) {
  grid-column: 1 / 7;
}

.yhod-item:nth-child(12n + 12) {
  grid-column: 7 / 13;
}

@media (max-width: 1200px) {
  .yhod-item {
    font-size: 24px;
  }

  .yhod-item:nth-child(2n + 1) {
    grid-column: 1 / 7;
  }

  .yhod-item:nth-child(2n + 2) {
    grid-column: 7 / 13;
  }
}
@media (max-width: 767px) {
  .yhod-list {
    gap: 5px;
  }
  .yhod-item {
    padding-bottom: 145%;
  }
}