.container12 {
  width:100%;
  float: left;
  display: flex;
  overflow-x: scroll;
  padding: 10px;
  background: #ffffff;
  scroll-snap-type: x mandatory;
  scroll-padding: 4px;
  border-radius: 8px;
  gap: 12px;
}

.container12::-webkit-scrollbar {
  height: 5px;
  
}

.container12::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.container12::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.container12 .item12 {
  flex:100%;
  height: 65%; /* Added height property */
  padding: 15px;
  color: #ffffff;
  border-radius: 8px;
  scroll-snap-align: start;
}

.item12 img {
  float: left; /* There's no 'float: center', you can remove this line */
  width: 220px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 5px;
}

.container12 .item12 h2 {
  text-transform: capitalize;
}


.container12 .item12:nth-child(1) {
  background: linear-gradient(170deg, #0061ff, #60efff);
}

.container12 .item12:nth-child(2) {
  background: linear-gradient(170deg, #7ef29d, #0f68a9);
}

.container12 .item12:nth-child(3) {
  background: linear-gradient(170deg, #40c9ff, #e81cff);
}

.container12 .item12:nth-child(4) {
  background: linear-gradient(170deg, #f7ba2c, #ea5459);
}

.container12 .item12:nth-child(5) {
  background: linear-gradient(170deg, #e2db1f, #ae10f9);
}
.container12 .item12:nth-child(6) {
  background: linear-gradient(170deg, #e2db1f, #ae10f9);
}