/* =========================
   Bootstrap Image Utilities
   ========================= */

/* Full width image, auto height */

.img-full {
  width: 100%;
  height: auto;
  display: block;
}

/* Auto constrain: Never exceed parent container */

.img-constrain {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Fixed Max Width Utilities */

.img-max-200 {
  max-width: 200px;
  height: auto;
}

.img-max-300 {
  max-width: 300px;
  height: auto;
}

.img-max-400 {
  max-width: 400px;
  height: auto;
}

.img-max-500 {
  max-width: 500px;
  height: auto;
}

.img-max-600 {
  max-width: 600px;
  height: auto;
}

/* Responsive Max Width Variants */

/* Small devices */

@media (min-width: 576px) {
  .img-max-sm-400 {
    max-width: 400px;
  }
}

@media (min-width: 576px) {
  .img-max-sm-600 {
    max-width: 600px;
  }
}

/* Medium devices */

@media (min-width: 768px) {
  .img-max-md-400 {
    max-width: 400px;
  }
}

@media (min-width: 768px) {
  .img-max-md-600 {
    max-width: 600px;
  }
}

/* Large devices */

@media (min-width: 992px) {
  .img-max-lg-400 {
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .img-max-lg-600 {
    max-width: 600px;
  }
}

/* Extra Large devices */

@media (min-width: 1200px) {
  .img-max-xl-400 {
    max-width: 400px;
  }
}

@media (min-width: 1200px) {
  .img-max-xl-600 {
    max-width: 600px;
  }
}

/* Object-fit Cropping Utilities */

.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-contain {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.img-fit-column {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}

/* Image fills its column both ways, crops as needed */

.img-cover-100 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: a wrapper to keep rounded corners & shadow on the image area */

.img-wrap-rounded {
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
}

/* Column with image acts as a proper container */

.col-img {
  display: flex;
}

.col-img .img-fill {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: .5rem;
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.15);
  min-height: 240px;
}

/* Image fills wrapper; choose cover (crop) or contain (letterbox) */

.col-img .img-fill > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
}

.video-wrapper {
  position: relative;
  width: 50%;
  padding-top: 177.77%;
  /*16: 9 = 56.25%, Portrait 9:16 = 177.77%;*/
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}