.img-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-box:after {
  content: "";
  display: block;
}
.img-box img,
.img-box picture {
  position: absolute !important;
  display: flex;
  min-width: 100%;
  min-height: 100%;
  max-width: none !important;
  max-height: none !important;
}

.img-box-dynamic:after {
  padding-bottom: var(--dynamic-ratio);
}

.img-box-1-1:after {
  padding-bottom: 100%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-1-1:after {
    padding-bottom: 100%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-1-1:after {
    padding-bottom: 100%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-1-1:after {
    padding-bottom: 100%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-1-1:after {
    padding-bottom: 100%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-1-1:after {
    padding-bottom: 100%;
  }
}

.img-box-1-2:after {
  padding-bottom: 50%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-1-2:after {
    padding-bottom: 50%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-1-2:after {
    padding-bottom: 50%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-1-2:after {
    padding-bottom: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-1-2:after {
    padding-bottom: 50%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-1-2:after {
    padding-bottom: 50%;
  }
}

.img-box-1-3:after {
  padding-bottom: 33.3333333333%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-1-3:after {
    padding-bottom: 33.3333333333%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-1-3:after {
    padding-bottom: 33.3333333333%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-1-3:after {
    padding-bottom: 33.3333333333%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-1-3:after {
    padding-bottom: 33.3333333333%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-1-3:after {
    padding-bottom: 33.3333333333%;
  }
}

.img-box-1-4:after {
  padding-bottom: 25%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-1-4:after {
    padding-bottom: 25%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-1-4:after {
    padding-bottom: 25%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-1-4:after {
    padding-bottom: 25%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-1-4:after {
    padding-bottom: 25%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-1-4:after {
    padding-bottom: 25%;
  }
}

.img-box-2-3:after {
  padding-bottom: 66.6666666667%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-2-3:after {
    padding-bottom: 66.6666666667%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-2-3:after {
    padding-bottom: 66.6666666667%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-2-3:after {
    padding-bottom: 66.6666666667%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-2-3:after {
    padding-bottom: 66.6666666667%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-2-3:after {
    padding-bottom: 66.6666666667%;
  }
}

.img-box-3-4:after {
  padding-bottom: 75%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-3-4:after {
    padding-bottom: 75%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-3-4:after {
    padding-bottom: 75%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-3-4:after {
    padding-bottom: 75%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-3-4:after {
    padding-bottom: 75%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-3-4:after {
    padding-bottom: 75%;
  }
}

.img-box-9-16:after {
  padding-bottom: 56.25%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-9-16:after {
    padding-bottom: 56.25%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-9-16:after {
    padding-bottom: 56.25%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-9-16:after {
    padding-bottom: 56.25%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-9-16:after {
    padding-bottom: 56.25%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-9-16:after {
    padding-bottom: 56.25%;
  }
}

.img-box-9-21:after {
  padding-bottom: 42.8571428571%;
}

@media screen and (min-width: 576px) {
  .img-box-sm-9-21:after {
    padding-bottom: 42.8571428571%;
  }
}

@media screen and (min-width: 768px) {
  .img-box-md-9-21:after {
    padding-bottom: 42.8571428571%;
  }
}

@media screen and (min-width: 992px) {
  .img-box-lg-9-21:after {
    padding-bottom: 42.8571428571%;
  }
}

@media screen and (min-width: 1200px) {
  .img-box-xl-9-21:after {
    padding-bottom: 42.8571428571%;
  }
}

@media screen and (min-width: 1400px) {
  .img-box-xxl-9-21:after {
    padding-bottom: 42.8571428571%;
  }
}