.containercarousel {
  max-width: 1800px;
  margin: 0 auto;
}

.carousel {
  padding: 0px;
}
.carousel h2 {
  margin: 0;
}
.carousel a {
  text-decoration: none;
  color: #191919;
}
.carousel img {
  aspect-ratio: 1/1;
  width: 500px;
  height: 380px;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  margin-bottom: 8px;
  border-radius: 20px;
  max-width: none;
  display: unset;

    --c: #FFF; /* slider img border color yellow #FCE057 */
  --b: 10px;    /* the border thickness*/
  --g: -6px;     /* the gap on hover */
  
  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%,var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
     var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
     0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
.carousel img:hover {
    --_i: 100%;
  transition: .3s, background-size .3s .3s;
   border-radius: 20px;
}
.carousel h3 {
  font-size: 18px;
  margin: 0;
  margin-bottom: 4px;
  float:left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.carousel span {
  color: #a7a7a7;
  float:right;
  font-size: 18px;
  margin: 0;
  margin-bottom: 4px;
  float:right;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 120%;
}

.carousel .carousel__wrapper {
  position: relative;
  margin-bottom: 0px;
}
@media only screen and (min-width: 1180px) {
  .carousel .carousel__wrapper.has-arrows .carousel__content {
    justify-content: space-between;
  }
}
@media only screen and (min-width: 1180px) {
  .carousel .carousel__wrapper.has-arrows .carousel__arrows {
    display: flex;
  }
}
.carousel .carousel__header {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}
.carousel .carousel__content {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 0;
  margin: 0;
  grid-gap: 16px;
  grid-auto-flow: column;
  list-style: none;
  padding-top: 4px;
  position: relative;
  width: 109%;
}
.carousel .carousel__content::-webkit-scrollbar {
  display: none;
}
.carousel .carousel__item .carousel__description {
  width: 100%;
}

.carousel .carousel__item a {
  display: flex;
  justify-content: center;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
  user-select: none;
  margin: 0px 0px;
  padding: 0px;
  background: #fff;
  border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px);
  cursor: pointer;
   transition-duration: 0.5s;
}
.carousel .carousel__item a:hover {
  opacity: 80;
}
.carousel .carousel__item2 {
  width:140px;
}

.carousel .carousel__controls {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 24px;
}
.carousel .carousel__arrow {

  background: #fff;
  box-shadow: none;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  width: 40px;
  height: 40px;
  border-radius: 100px;
   transition-duration: 0.5s;
}


.carousel .carousel__arrow:hover {
  background-color: #FCE057;
  color: white;
   border-color: #FCE057;
}
.carousel .carousel__arrow.disabled:hover {
       background-color: #fff;
}

.carousel .carousel__arrow:before {
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
  background-size: contain;
  filter: brightness(0);
  display: block;
  width: 18px;
  height: 12px;
  cursor: pointer;
}
.carousel .carousel__arrow.arrow-prev:before {
  transform: rotate(90deg);
  margin-left: 4px;
}
.carousel .carousel__arrow.arrow-next:before {
  transform: rotate(-90deg);
  margin-left: 8px;

}
.carousel .carousel__arrow.disabled::before {
  filter: brightness(4);
}
.carousel .carousel__arrow.disabled {
      border-color: #e8e9e9;
}








/* Medium devices ( 360px and below) */
@media screen and (max-width:360px){
.carousel .carousel__item2 {
  width:0px;
}
.carousel img {
  width: 264px;
  height: 372px;
}
.carousel .carousel__content {
  grid-gap: 4px;
}
#slidetile2 {
  display: unset;

}
#slidetile1 {
  display: none;

}
}






/* Medium devices ( 361px and up) */
@media screen and (min-width:361px){
.carousel .carousel__item2 {
  width:24px;
}
.carousel img {
  width: 264px;
  height: 372px;
}
#slidetile2 {
  display: unset;

}
#slidetile1 {
  display: none;

}
}





/* Medium devices ( 520px and up) */
@media screen and (min-width:520px){
.carousel .carousel__item2 {
  width:60px;
}
.carousel img {
  width: 264px;
  height: 372px;
}
#slidetile2 {
  display: unset;

}
#slidetile1 {
  display: none;

}
}




/* Medium devices ( 480px and below) */
@media screen and (max-width:480px){
  .carousel .carousel__content {
  grid-gap: 12px;
}
}



/* Medium devices ( 961px and up) */
@media screen and (min-width:961px){
.carousel .carousel__item2 {
  width:80px;
}
.carousel img {
  width: 500px;
  height: 380px;
}
#slidetile2 {
  display: none;

}
#slidetile1 {
  display: unset;

}
}



/* Medium devices ( 1161px and up) */
@media screen and (min-width:1160px){
.carousel .carousel__item2 {
  width:100px;
}
}





/* Medium devices ( 1260px and up) */
@media screen and (min-width:1260px){
.carousel .carousel__item2 {
  width:140px;
}
}






/* Extra large devices (large laptops and desktops, 1880px and up) */
@media screen and (min-width:1880px){
.carousel .carousel__item2 {
  width:152px;
}
}