/* =========================================
   ASPECT RATIO UTILITIES (SCSS)
   - Generates .u-aspect-W-H using padding-top method
   - padding-top uses (H / W) * 100%  (height first)
   Usage:
     <div class="u-aspect-16-9">
       <div class="inner">
         ...media/content...
       </div>
     </div>
   ========================================= */
[class*=u-aspect-] {
  position: relative;
  width: 100%;
}

[class*=u-aspect-]::before {
  display: block;
  content: "";
  width: 100%;
}

[class*=u-aspect-] > .inner {
  position: absolute;
  inset: 0;
}

.u-aspect-7-3::before {
  padding-top: 42.8571428571%;
}

.u-aspect-12-7::before {
  padding-top: 58.3333333333%;
}

.u-aspect-16-9::before {
  padding-top: 56.25%;
}

.u-aspect-9-16::before {
  padding-top: 177.7777777778%;
}

.u-aspect-1-1::before {
  padding-top: 100%;
}

.u-aspect-4-3::before {
  padding-top: 75%;
}

.u-aspect-4-5::before {
  padding-top: 125%;
}

.u-aspect-3-4::before {
  padding-top: 133.3333333333%;
}

.u-aspect-3-2::before {
  padding-top: 66.6666666667%;
}

.u-aspect-2-3::before {
  padding-top: 150%;
}

.u-aspect-16-7::before {
  padding-top: 43.75%;
}

.u-aspect-6-5::before {
  padding-top: 83.3333333333%;
}

.elementor-widget-magnetic_image_widget {
  width: 100%;
}

[class*=u-aspect-] picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Base positioning (no object-fit here) */
[class*=u-aspect-] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Object-fit utilities (widget can toggle these) */
.u-fit-cover img {
  object-fit: cover;
}

.u-fit-contain img {
  object-fit: contain;
}

.u-fit-fill img {
  object-fit: fill;
}

.u-fit-none img {
  object-fit: none;
}

.u-fit-scale-down img {
  object-fit: scale-down;
}