@use "../../../../../styles" as *;

h1.title {
  color: $col-white;
  font-weight: 600;
  @media (min-width: 425px) {
    width: 205px;
  }
}
.svg-box {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  svg {
    fill: $col-darkGray;
    height: fit-content;
    position: absolute;
    &:first-child {
      top: 140px;
      right: -150px;
      transform: rotate(45deg);
      width: 140px;
    }
    &:nth-child(2) {
      width: 100px;
      left: -160px;
      top: 120px;
      transform: rotate(-45deg);
    }
  }
}

.items-title {
  font-weight: 400;
  color: $col-white;
  padding: 10px 0;
}
.slider {
  &:nth-of-type(2) {
    margin-bottom: 40px;
  }
  padding: 0 !important;
  display: flex;
  overflow: hidden;
  overflow-x: scroll;
  gap: 15px;
  height: fit-content;
  width: 100%;
  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}

.buy {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .add-to-cart {
    width: $small-btn-size;
    height: $small-btn-size;
    position: relative;
    border-radius: $rad-7;
    svg {
      $vol: 12px;
      width: $vol;
      height: $vol;
    }
  }
}
