.item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: rgba(255, 255, 255, 0.1);
  /* background-color: rgba(251, 216, 212, 0.1); */
  border-radius: 0.5rem;

  /*   grid-column-end: span 2; */
  min-height: 10rem;
  border-radius: 0.5rem;
}

.grid-container {
  /* for demo */
  max-width: 65rem;
  margin-inline: auto;
  margin-block: 3rem;

  container-type: inline-size;
}

.grid {
  display: grid;
  gap: 1rem;
  /*   grid-template-columns: repeat(calc(var(--column-count, 3) * 2), 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  @container (width >= calc(100px * 2 + 1rem)) {
    .item {
      grid-column: span 2;
    }
  }

  @container (calc(100px * 4 + 3rem) < width < calc(100px * 6 + 5rem) ) {
    .item:last-child:nth-child(odd) {
      grid-column: 2 / span 2;
    }
  }

  @container (calc(100px * 6 + 5rem) < width < calc(100px * 8 + 7rem)) {
    .item:nth-child(3n + 4):last-child {
      grid-column: 3 / 5;
    }

    &:has(:nth-child(3n + 5):last-child) > :nth-last-child(2) {
      grid-column: 2 / 4;
    }
  }

  @container (calc(100px * 8 + 7rem) < width < calc(100px * 10 + 9rem)) {
    .item:nth-child(4n + 5):last-child {
      grid-column: 4 / 6;
    }

    &:has(:nth-child(4n + 6):last-child) > :nth-last-child(2) {
      grid-column: 3 / 5;
    }

    &:has(:nth-child(4n + 7):last-child) > :nth-last-child(3) {
      grid-column: 2 / 4;
    }
  }
}

.item h3 {
  font-family: Cinzel, serif;
  font-size: 1.5rem;
  font-weight: 200;
  margin: 2rem 2rem 1rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}
.item p {
  margin: 1rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.item p:last-of-type {
  margin-block-end: 2rem;
}

.item button {
  padding: 0.5rem 2rem;
  margin-block-start: 2rem;
  border: none;
  border-radius: .4rem;
  user-select: none;
  cursor: pointer;
}