@media (min-width: 300px) {
  .carousel-item.horizontal {
    width: 139%;
    margin-left: -18%;
    margin-top: 26%;
  }
}

@media (min-width: 576px) {
  .carousel-item.horizontal {
    width: 137%;
    margin-left: -18%;
    margin-top: 12%;
  }
}

@media (min-width: 768px) {
  .carousel-item.horizontal {
    width: 95%;
    margin-left: 3%;
    margin-top: 0;
  }
}

@media (min-width: 992px) {
  .carousel-item.horizontal {
    width: 70%;
    margin-left: 15%;
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .carousel-item.horizontal {
    width: 75%;
    margin-left: 13%;
    margin-top: 0;
  }
}

@media (min-width: 300px) {
  .square {
    width: 140%;
    margin-left: -25%;
  }
}

@media (min-width: 576px) {
  .square {
    width: 120%;
    margin-left: -15%;
  }
}

@media (min-width: 768px) {
  .square {
    width: 90%;
    margin-left: 5%;
  }
}

@media (min-width: 992px) {
  .square {
    width: 66%;
    margin-left: 18%;
  }
}

@media (min-width: 300px) {
  .vertical {
    width: 130%;
    margin-left: -7%;
    margin-top: 6%;
  }
}

@media (min-width: 576px) {
  .vertical {
    width: 108%;
    margin-left: 0%;
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .vertical {
    width: 75%;
    margin-left: 12.5%;
    margin-top: 0;
  }
}

@media (min-width: 992px) {
  .vertical {
    width: 60%;
    margin-left: 20%;
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .vertical {
    width: 52%;
    margin-left: 26%;
    margin-top: 0;
  }
}

.horizontal_heights {
  height: 100%;
  object-fit: scale-down;
}