:root {
  --red: hsla(351, 83%, 38%, 1);
  --white: hsla(351, 100%, 100%, 1);
  --screen-lg: 1000px;
}

.cataloguePage {
  background: var(--red);
}

.girls__title {
  font-size: 44px;
  font-size: 2.75rem;
  line-height: 48px;
  line-height: 3rem;
  text-align: center;
}
.girls__description {
  margin-top: 100px;
  text-align: center;
}

@media (max-width: 1000px) {
  .girls__description {
    margin-top: 30px;
  }
}

@media screen and (min-width: 700px) {
  .girls__imgbanner {
    margin-bottom: 30px;
  }
  .girls__imgbanner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 20%;
    height: 80vh;
  }
  .girls__imgbanner img {
    object-fit: contain;
    height: 100%;
  }
  .girls__imgbanner  .girls__img01 {
    display: none;
  }
  .girls__imgbanner  .girls__img03 {
    height: calc(100% + 30%);
  }
}
@media screen and (max-width: 699px) {
  .girls__imgbanner {
    margin-bottom: -40px;
    margin-top: -40px;
  }
  .girls__imgbanner .container {
    position: relative;
    overflow: hidden;
  }
  .girls__imgbanner img {
    object-fit: contain;
    height: 100%;
  }
  .girls__imgbanner  .girls__img02,
  .girls__imgbanner  .girls__img03 {
    display: none;
  }
  .girls__imgbanner  .girls__img01 {
    width: 100vw;
    transform: rotate(-26deg) scale(1.23) translateX(29%) translateY(10%);
  }
}

.tastes2__switcher {
  display: none;
}

.tastes__visualColor {
  background: url("./heart.svg") no-repeat 50% 50% / contain;
}

.tastes-alt .tastes__visualControls .tastes__prevControl,
.tastes-alt .tastes__visualControls .tastes__nextControl {
  display: none;
}

@media (min-width: 1024px) {
  .tastes-alt .tastes__visualItem {
    flex: 0 0 calc(33.33% - var(--tastes-alt-gap) * 3 / 2);
  }
}

.tastes-alt .tastes__visualColor {
  transition: transform 0.3s ease;
}
.tastes-alt .tastes__visualItem-selected .tastes__visualColor {
  transform: scale(1.2);
}
.tastes-alt .tastes__visualItem-selected .tastes__visualName {
  color: var(--white);
  font-weight: bold;
} 

.tastes-alt .tastes__visualImages {
}

.tastes-alt .tastes__visualImages .tastes__visualDevice {
}
.tastes-alt .tastes__visualDevice_name {
  
}
.tastes-alt .tastes__visualDevice_name > span {
  color: var(--white);
  line-height: 70px;
}
.tastes-alt .tastes__visualDevice_name > span:before {
  content: "–";
  height: 70px;
  padding-left: 193px;
  background: url("./num_1.svg") no-repeat 0% 50% / contain;
  display: inline-block;
  font-size: 40px;
  line-height: 60px;
  margin-right: 15px;
  order: 0;
  text-align: right;
  vertical-align: middle;
}
@media (max-width: 1280px) {
  .tastes-alt .tastes__visualDevice_name {
    
  }
  .tastes-alt .tastes__visualDevice_name > span {
    font-size: 20px;
  }
  .tastes-alt .tastes__visualDevice_name > span:before {
    height: 42px;
    line-height: 30px;
    padding-left: 118px;
  }
}
.tastes-alt .tastes__visualDevice:nth-child(1) .tastes__visualDevice_name > span:before {
  background-image: url("./num_1.svg");
  padding-left: 144px;
}
.tastes-alt .tastes__visualDevice:nth-child(2) .tastes__visualDevice_name > span:before {
  background-image: url("./num_2.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(3) .tastes__visualDevice_name > span:before {
  background-image: url("./num_3.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(4) .tastes__visualDevice_name > span:before {
  background-image: url("./num_4.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(5) .tastes__visualDevice_name > span:before {
  background-image: url("./num_5.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(6) .tastes__visualDevice_name > span:before {
  background-image: url("./num_6.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(7) .tastes__visualDevice_name > span:before {
  background-image: url("./num_7.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(8) .tastes__visualDevice_name > span:before {
  background-image: url("./num_8.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(9) .tastes__visualDevice_name > span:before {
  background-image: url("./num_9.svg");
  padding-left: 166px;
}
.tastes-alt .tastes__visualDevice:nth-child(10) .tastes__visualDevice_name > span:before {
  background-image: url("./num_10.svg");
  padding-left: 190px;
}
.tastes-alt .tastes__visualDevice:nth-child(11) .tastes__visualDevice_name > span:before {
  background-image: url("./num_11.svg");
  padding-left: 170px;
}
.tastes-alt .tastes__visualDevice:nth-child(12) .tastes__visualDevice_name > span:before {
  background-image: url("./num_12.svg");
}
.tastes-alt .tastes__visualDevice:nth-child(13) .tastes__visualDevice_name > span:before {
  background-image: url("./num_13.svg");
}
.tastes-alt .tastes__visualDevice:nth-child(14) .tastes__visualDevice_name > span:before {
  background-image: url("./num_14.svg");
}
.tastes-alt .tastes__visualDevice:nth-child(15) .tastes__visualDevice_name > span:before {
  background-image: url("./num_15.svg");
}

@media (max-width: 1280px) {
  .tastes-alt .tastes__visualList {
    padding-top: 0;
  }
  .tastes-alt .tastes__visualDevice:nth-child(1) .tastes__visualDevice_name > span:before {
    padding-left: 90px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(2) .tastes__visualDevice_name > span:before {
    padding-left: 95px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(3) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(4) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(5) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(6) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(7) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(8) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(9) .tastes__visualDevice_name > span:before {
    padding-left: 98px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(10) .tastes__visualDevice_name > span:before {
    padding-left: 122px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(11) .tastes__visualDevice_name > span:before {
    padding-left: 105px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(12) .tastes__visualDevice_name > span:before {
  }
  .tastes-alt .tastes__visualDevice:nth-child(13) .tastes__visualDevice_name > span:before {
  }
  .tastes-alt .tastes__visualDevice:nth-child(14) .tastes__visualDevice_name > span:before {
  }
  .tastes-alt .tastes__visualDevice:nth-child(15) .tastes__visualDevice_name > span:before {
  }
}

@media (min-width: 768px) {
  .tastes-alt .tastes__visualDevice_name {
    flex-basis: 60%;
  }
}
@media (max-width: 1024px) {
  .tastes-alt .tastes__visualImages {
    gap: 10px;
  }
  .tastes-alt .tastes__visualDevice_name {
    flex-basis: 65%;
  }
  .tastes-alt .tastes__visualDevice_name {
    padding-left: 0;
  }
  .tastes-alt .tastes__visualDevice_name > span {
    font-size: 16px;
  }
  .tastes-alt .tastes__visualDevice:nth-child(11) .tastes__visualDevice_name > span:before {
    height: 35px;
  }
}
@media (max-width: 768px) {
  .tastes-alt .tastes__visualList {
    max-width: 300px;
  }
  .tastes__visualDevice img {
    max-width: 500px;
  }
  .tastes-alt .tastes__visual {
    padding-top: 0;
  }
  .tastes-alt  .tastes__visualList {
    justify-content: center;
  }
  .tastes-alt  .tastes__visualName {
    display: none !important;
  }
  .tastes-alt .tastes__visualItem {
    flex: 0 0 40px !important;
  }
  .tastes-alt .tastes__visualColor {
    position: relative;
    aspect-ratio: 40 / 34;
    border-radius: 0;
    flex: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tastes-alt .tastes__visualColor:before {
    content: "";
    background: url("./num_1.svg") no-repeat 50% 50% / contain;
    position: absolute;
    flex: 0 0 60%;
    width: 60%;
    aspect-ratio: 1 / 1;
  }
  .tastes-alt .tastes__visualItem:nth-child(1) .tastes__visualColor:before {
    background-image: url("./num-1-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(2) .tastes__visualColor:before {
    background-image: url("./num-2-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(3) .tastes__visualColor:before {
    background-image: url("./num-3-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(4) .tastes__visualColor:before {
    background-image: url("./num-4-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(5) .tastes__visualColor:before {
    background-image: url("./num-5-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(6) .tastes__visualColor:before {
    background-image: url("./num-6-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(7) .tastes__visualColor:before {
    background-image: url("./num-7-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(8) .tastes__visualColor:before {
    background-image: url("./num-8-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(9) .tastes__visualColor:before {
    background-image: url("./num-9-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(10) .tastes__visualColor:before {
    background-image: url("./num-10-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(11) .tastes__visualColor:before {
    background-image: url("./num-11-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(12) .tastes__visualColor:before {
    background-image: url("./num-12-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(13) .tastes__visualColor:before {
    background-image: url("./num-13-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(14) .tastes__visualColor:before {
    background-image: url("./num-14-sm.svg");
  }
  .tastes-alt .tastes__visualItem:nth-child(15) .tastes__visualColor:before {
    background-image: url("./num-15-sm.svg");
  }
  
}
