:root {
  --gap: clamp(0.25rem, 1vw, 0.5rem);
  --depth: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  /*  overflow-x: hidden;  Prevent horizontal scrolling */
}

.wrapper {
  width: 100vw; /* Match the viewport width exactly */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#grid {
  display: grid;
  width: 100%;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  > .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* min-height: 250px; */
    background-color: var(--gridbg);
    border: 5px solid var(--gridtx);
    border-radius: 1rem;
    box-shadow: 0 15px 25px hsla(0, 0%, 0%, 0.6);
    place-items: center;
    justify-content: center;
  }
}

@media (max-width: 300px) {
  #grid {
    /* Adjust for screens smaller than 300px */
    grid-template-columns: 1fr;
    > * {
      width: 100%;
      background-color: hsl(121, 62%, 51%) !important;
      border: 5px solid hsl(46, 90%, 57%) !important;
    }
  }
}

.span2 {
  grid-column: span min(2, var(--maxspan));
  grid-row: span var(--depth);
}

.span3 {
  grid-column: span min(3, var(--maxspan));
  grid-row: span var(--depth);
}

.span4 {
  grid-column: span min(4, var(--maxspan));
  grid-row: span var(--depth);
}