/* =================================
   Responsive Ratio Utilities
   Bootstrap 5.3 compatible
================================= */

/* Base ratios */
.ratio-1x1  { --bs-aspect-ratio: 100% !important; }
.ratio-4x3  { --bs-aspect-ratio: 75% !important; }
.ratio-16x9 { --bs-aspect-ratio: 56.25% !important; }
.ratio-21x9 { --bs-aspect-ratio: 42.857143% !important; }


/* SM */
@media (min-width:576px){

  .ratio-sm-1x1  { --bs-aspect-ratio:100% !important; }
  .ratio-sm-4x3  { --bs-aspect-ratio:75% !important; }
  .ratio-sm-16x9 { --bs-aspect-ratio:56.25% !important; }
  .ratio-sm-21x9 { --bs-aspect-ratio:42.857143% !important; }

}


/* MD */
@media (min-width:768px){

  .ratio-md-1x1  { --bs-aspect-ratio:100% !important; }
  .ratio-md-4x3  { --bs-aspect-ratio:75% !important; }
  .ratio-md-16x9 { --bs-aspect-ratio:56.25% !important; }
  .ratio-md-21x9 { --bs-aspect-ratio:42.857143% !important; }

}


/* LG */
@media (min-width:992px){

  .ratio-lg-1x1  { --bs-aspect-ratio:100% !important; }
  .ratio-lg-4x3  { --bs-aspect-ratio:75% !important; }
  .ratio-lg-16x9 { --bs-aspect-ratio:56.25% !important; }
  .ratio-lg-21x9 { --bs-aspect-ratio:42.857143% !important; }

}


/* XL */
@media (min-width:1200px){

  .ratio-xl-1x1  { --bs-aspect-ratio:100% !important; }
  .ratio-xl-4x3  { --bs-aspect-ratio:75% !important; }
  .ratio-xl-16x9 { --bs-aspect-ratio:56.25% !important; }
  .ratio-xl-21x9 { --bs-aspect-ratio:42.857143% !important; }

}


/* XXL */
@media (min-width:1400px){

  .ratio-xxl-1x1  { --bs-aspect-ratio:100% !important; }
  .ratio-xxl-4x3  { --bs-aspect-ratio:75% !important; }
  .ratio-xxl-16x9 { --bs-aspect-ratio:56.25% !important; }
  .ratio-xxl-21x9 { --bs-aspect-ratio:42.857143% !important; }

}

/* ENABLE ratio mechanics */
.ratio-box {
	position: relative;
}

.ratio-box::before {
	content: "";
	display: block;
	padding-top: var(--bs-aspect-ratio, 0);
}

.ratio-box > * {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* DISABLE mechanics */
.ratio-box-0 {
  position: relative;
}

.ratio-box-0::before {
  display: none;
}

.ratio-box-0 > * {
  position: relative;
  inset: auto;
  height: auto;
}