@media (min-width: 768px) {
  body.in-index #carousel {
    height: auto !important;
    padding: 18px 20px !important;
  }
  body.in-index #carousel .carousel-inner {
    display: flex !important;
    height: auto !important;
    gap: 18px;
    overflow: hidden !important;
  }
  body.in-index #carousel .carousel-inner > .item {
    display: block !important;
    flex: 0 0 calc((100% - 54px) / 4) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  body.in-index #carousel .carousel-inner > .item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 22 / 25;
    object-fit: cover !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.in-index #carousel .carousel-inner > .item {
    flex-basis: calc((100% - 36px) / 3) !important;
  }
}
@media (max-width: 767px) {
  body.in-index #carousel {
    height: auto !important;
    padding: 10px !important;
  }
  body.in-index #carousel .carousel-inner {
    display: flex !important;
    height: auto !important;
    gap: 12px;
    overflow-x: auto !important;
  }
  body.in-index #carousel .carousel-inner > .item {
    display: block !important;
    flex: 0 0 82vw !important;
    width: auto !important;
    height: auto !important;
  }
  body.in-index #carousel .carousel-inner > .item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 22 / 25;
    object-fit: cover !important;
  }
}