#hero {
  height: max(240px, calc(100vh - 109px));
  margin: 0px auto;
  overflow: hidden;
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#hero #slides {
  --clr-dsc: #b26673;/*#f7a26e;*/
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slides .slide {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: none;
  width: 100%;
  gap: 20px;
  flex-wrap: wrap;
}

#slides .slide > * {opacity: 0; transition: opacity 1.2s .1s;}
#slides .slide.active > * {opacity: 1}

#slides .slide .image {
  width: min(250px, 100%); overflow: hidden;
  border-radius: 5%;
  align-self: center;
}


#slides .slide img {
  width: 100%;
  height: auto;
  position: relative;
  /* right: min(-100px, -12%); */
  object-fit: contain;
  transform: scale(1.05);
  opacity: 0;
  filter: grayscale(1);
  transition: 4s 1s, opacity .8s .2s;
}

#slides .slide.active img {
  opacity: 1;
  /* right: 0; */
  transform: scale(1);
  transition: ease-out 5s, filter .5s 2.5s, opacity ease-out 1.5s 1.3s;
  filter: grayscale(0);
}

#slides .desc {
  position: relative;
  width: min(430px, 100%);
  transition: opacity linear .5s 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

#slides .desc .nom {
  position: relative;
  opacity: 0;
  top: -45px;
  transition: .4s .6s;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--clr-quaternary-2);
  text-transform: capitalize;
}

#slides .desc .dsc {
  text-align: justify;
  opacity: 0;
  top: -20px;
  position: relative;
  transition: .4s .8s;
  height: 8em;
  overflow: hidden;
  font-size: 0.9rem;
  font-family: serif;
  color: var(--clr-dsc);
}

#slides .desc .dsc::after {
  content: "";
  background: linear-gradient(#FFFFFF00,var(--clr-ternary-2));
  position: absolute;
  width: 100%;
  height: 4em;
  bottom: 0;
  left: 0;
}

#slides .slide.active .desc .nom {
  opacity: 1;
  top: 0;
  transition: .4s .8s;
}

#slides .slide.active .desc .dsc {
  opacity: 1;
  top: 0;
  transition: .5s 1.1s;
}

#slides .desc .add {display: flex; align-items: center; justify-content: space-between;width: min(250px, 100%)}
#slides .desc .prix {  align-self: flex-end;}

#slides .btnaddcart {
  font-size: 3em;
  background-color: var(--clr-quaternary-2);
  color: var(--clr-ternary-2);
  border-radius: 5px;
  cursor: pointer;
  z-index: 0;
  width: 32px; height: 32px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: .3s;
}

#slides .slide.active .btnaddcart {z-index: 2}
#slides .btnaddcart:hover {
  background-color: var(--clr-secondary-2)
}

#slides .quantite {display: none}

@media (min-width: 600px) {
  #hero {height: max(240px, calc(100vh - 93px)) }
  #slides .slide { flex-wrap: nowrap; gap: 50px}
  #slides .slide .image { width: min(450px, 50%)}
  #slides .desc {width: min(400px, 50%); gap:50px}
  @media (orientation: portrait) {
    #slides .desc .dsc {height: auto;overflow: unset}
    #slides .desc .dsc::after {background:none}
  }
  @media (min-width: 768px) {
    #slides .desc {gap:75px}
    #slides .desc .dsc {font-size: 1.1rem}
    #slides .desc .add {width: min(450px, 80%)}
    #slides .desc .prix {align-self:center; order: 1}
    @media (min-width: 900px) {
      #slides .desc .dsc {height: auto;overflow: unset}
      #slides .desc .dsc::after {background:none}
      @media (min-width: 1024px) {
        #hero { height: max(250px, calc(100vh - 136px));width: 100%; margin:auto }
        #slides .btnaddcart {width: 48px; height: 48px}
        @media (min-width: 1600px) {
          #hero { height: max(450px, calc(100vh - 146px)) }
        }
      }
    }
  }
}

@media (max-width: 1023px) {
  @media (orientation: landscape) {
    @media (max-height:420px) {
      #hero { height: calc(100vh - 45px) }
    }
    #slides .desc {gap:20px}
    @media (max-width: 899px) {
      #slides .desc .dsc {font-size: 0.9rem}
      #slides .slide .image { width: min(220px, 50%)}
    }
    #hero .positions { right: 10px; }
  }
  @media (max-width: 299px) {
    #slides .desc .dsc {display: none}
  }
}
#hero .positions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 5px;
  z-index: 5;
}

#hero .positions .pos {
  --size-pos: 6px;
  background-color: var(--clr-quaternary-2);
  border-radius: calc(var(--size-pos) / 2);
  width: var(--size-pos);
  height: var(--size-pos);
  cursor: pointer;
  transition: .5s .2s;
}

#hero .positions .pos.active {
  background-color: var(--clr-secondary-2);
  width: calc(var(--size-pos) * 3);
}

@media (min-width: 768px) {
  #hero .positions .pos {--size-pos:8px;}
}