/* Flex container */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* start items from left */
  gap: 15px;
  padding: 20px;
  border: 3px solid #333;
  border-radius: 15px;
  background: #f0f0f0;
}

/* Flex items as links */
.item {
  flex: 1 1 calc((100% - 15px * 6) / 7); /* max 7 items per row */
  min-width: 80px;
  height: 80px;
  background: coral;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  border: 3px solid black;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-sizing: border-box;
}

/* Hover effect with proportional growth */
.item:hover {
  transform: scale(1.25);
  background: orange;
  border-color: black;
  z-index: 1;
}

/* Responsive adjustment: if fewer than 7 items, expand to fill */
.container > .item:nth-last-child(-n+7) {
  flex: 1 1 0;  /* items grow equally if less than 7 */
}