.hexagon {
  background-color: var(--bs-secondary);
  width: min(1fr, 240px);
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
  transition: background-color 200ms ease-in-out;
}

.hexagon:hover {
  background-color: #0B2381;
}

.hexagon p {
  color: white;
  margin: 0;
}

.hexagon-container {
  display: grid;
  gap: 0 1rem;
}

@media (max-width: 991px) {
  .hexagon-container {
    grid-template-areas:
      "item1 item1 item2 item2"
      ". item3 item3 ."
      "item4 item4 item5 item5"
      ". item6 item6 ."
      "item7 item7 item8 item8"
      ". item9 item9 ."
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .hexagon-container {
    grid-template-areas:
      "item1 item1 item2 item2 item3 item3 item4 item4"
      ". item5 item5 item6 item6 item7 item7 ."
      ". . item8 item8 item9 item9 . ."
  }
}

@media (min-width: 1400px) {
  .hexagon-container {
    grid-template-areas:
      "item1 item1 item2 item2 item3 item3 item4 item4 item5 item5"
      ". item6 item6 item7 item7 item8 item8 item9 item9 ."
  }
}

.hexagon:nth-child(1) { grid-area: item1; }
.hexagon:nth-child(2) { grid-area: item2; }
.hexagon:nth-child(3) { grid-area: item3; }
.hexagon:nth-child(4) { grid-area: item4; }
.hexagon:nth-child(5) { grid-area: item5; }
.hexagon:nth-child(6) { grid-area: item6; }
.hexagon:nth-child(7) { grid-area: item7; }
.hexagon:nth-child(8) { grid-area: item8; }
.hexagon:nth-child(9) { grid-area: item9; }