.panel-container {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr 1fr; /* Three columns of equal size */
  grid-template-rows: auto auto auto; /* Three rows, size will be determined by content */
  gap: 10px; /* Space between grid items */
  padding: 10px; /* Padding around the grid */
}

.item-1-1-4-2 {
  grid-area: 1 / 1 / 4 / 2; /* Spans from row 1 to 4, column 1 */
}

.item-1-2-2-4 {
  grid-area: 1 / 2 / 2 / 4;
}

.item-1-3-1-4 {
  grid-area: 1 / 3 / 1 / 4;
}

.item-1-2-2-3 {
  grid-area: 1 / 2 / 2 / 3; /* Spans from row 1 to 2, column 2 */
}

.item-2-2-3-4 {
  grid-area: 2 / 2 / 3 / 4;
}

.item-fishing {
  grid-area: 3 / 2 / 4 / 3; /* Spans from row 3 to 4, column 2 */
}

.item-science {
  grid-area: 3 / 3 / 4 / 4; /* Spans from row 3 to 4, column 3 */
}

.item-1-3-4-4 {
  grid-area: 1 / 3 / 4 / 4;
}

.item-1-2-2-2 {
  grid-area: 1 / 2 / 2 / 2;
}

.item-1-3-4-1 {
  grid-area: 1 / 3 / 4 / 1;
}

.item-1-2-4-4 {
  grid-area: 1 / 2 / 4 / 4;
}

/* Add common styles for all items */
.panel-container > div {
/*   padding: 20px; */
  border-radius: 10px;
  background-color: var(--color-panel-bg, rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .panel-container {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .item-1-1-4-2 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .item-1-2-2-4,
  .item-2-2-3-4 {
    grid-area: auto;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .panel-container {
    display: block;
    padding: 0px;
  }
  .panel-container > div {
    margin: 1vh 0;
    border-radius: 0px;
    transition: transform var(--transition-fast, 0.15s ease);
  }

  .panel-container > div:active {
    transform: scale(0.98);
  }

  .none-mobile {
    display: none;
  }

  .mob-h-12vh {
    height: 12vh;
  }
}