body {
  padding-block: 15px;
}

.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: row;
  container: cardwrapper / inline-size;
}

.card-item {
  border: 1px solid rgb(34, 29, 29);
  padding: 10px;
  flex-grow: 1;
  flex-basis: 30%;
  max-width: 100%;
  font-size: 1.5rem;
}

/* wrap such content which going outside of wrapper */
.overflow-auto {
  overflow-x: auto;
}

@container cardwrapper (width < 420px) {
  .card-item {
    min-width: 320px;
  }
}