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

body {
  --scroll-gap: 30px;
}

.scroll_wrap {
  margin-block-start: 20vh;
  width: 100%;
  overflow: hidden;
}

.scroll_inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--scroll-gap);
}

.scroll_cont {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  min-width: 22vw;
  aspect-ratio: 1 / 1;
  color: white;
  font-size: 1.375rem;
  font-weight: bold;

  &:nth-of-type(1) {
    background-color: #3d82fa;
  }
  &:nth-of-type(2) {
    background-color: #fa563c;
  }
  &:nth-of-type(3) {
    background-color: #c4fa3c;
  }
  &:nth-of-type(4) {
    background-color: #574975;
  }
  &:nth-of-type(5) {
    background-color: #f5d444;
  }
}