html {
  padding: 0px;
  margin: 0px;
}

* {
margin: 0;
padding: 0;
}

body {
  min-width: 320px;
  font-size: 18px;
  padding: 0px;
  margin: 0px;
}

.container {
  font-size: 18px;
}

.col-12 > .display-6 {
  color: #198754;
}



.modalht > .carousel-inner > .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media only screen and (min-height: 960px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 855px;
  }
}

@media only screen and (min-height: 900px) and (max-height: 959px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 840px;
  }
}

@media only screen and (min-height: 800px) and (max-height: 899px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 740px;
  }
}

@media only screen and (min-height: 700px) and (max-height: 799px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 640px;
  }
}

@media only screen and (min-height: 600px) and (max-height: 699px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 540px;
  }
}

@media only screen and (min-height: 500px) and (max-height: 599px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 440px;
  }
}

@media only screen and (min-height: 400px) and (max-height: 499px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 340px;
  }
}

@media only screen and (min-height: 350px) and (max-height: 399px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 290px;
  }
}

@media only screen and (min-height: 300px) and (max-height: 349px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 240px;
  }
}

@media only screen and (max-height: 299px) {
  .modalht > .carousel-inner > .carousel-item {
    width: 100%;
    height: 140px;
  }
}