
.carousel {width: 100vw; height: 750px; border: 0px solid #f90; padding: 0px; margin: 0px 0px -61px 0px; position: relative; top:0px; left: 0px; z-index: 10; transform: translateY(-61px)}


.carousel__content {
  width: 100%; height: 750px; background-size: cover!important; background-position: center center!important; background-repeat: no-repeat!important; position: relative;
}
.carousel__nav {
    width: 24px; height: 24px;
  padding: 3px;
  user-select: none; cursor: pointer
}
.carousel__nav img {width: 17px}

.carousel__nav--prev {
  position: absolute; bottom: 60px; right: 190px; z-index: 300
}
.carousel__nav--next {
  position: absolute; bottom: 60px; right: 150px
}

.carousel__pagination {
  display: none;
  gap: 0.4rem;
  justify-content: center;z-index: 300
}
.carousel__pagination input {
  appearance: none;
  display: block;
  width: 1rem;
  height: 1rem;
  background: #f9f;
  border: none;
  border-radius: 100%; cursor: pointer;
}
.carousel__pagination input:checked {
  background: #ffffff;
  opacity: 0.7; cursor: auto
}




/**************** tablet ************/
@media all and (max-width: 1440px) {
    

    
.carousel__nav--prev {right: 60px;}
.carousel__nav--next {right: 20px}
    

}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.carousel {width: 100vw; height: 100vh; border: 0px solid #f90;}
    
.carousel__content {
  width: 100%; height: 100vh; }

    
.carousel__nav {display: none}

.carousel__pagination {
  display: flex;
  gap: 0.4rem;
  justify-content: center;z-index: 300; ; transform: translateY(-50px)
}
.carousel__pagination input {
  appearance: none;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--white);
  border: none;
  border-radius: 100%; cursor: pointer;
}
.carousel__pagination input:checked {
  background: #ffffff;
  opacity: 0.7; cursor: auto
}

}
