:root {
  --uw-framed-image-bg: #f5f5f5;
}

[data-bs-theme="dark"] {
  --uw-framed-image-bg: #404040;
}

.uw-framed-image--framed {
  background-color: var(--uw-framed-image-bg);
  aspect-ratio: 3 / 2;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.uw-framed-image--framed picture {
  display: contents;
}

.uw-framed-image--framed img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.uw-framed-image--ratio-1-1 {
  aspect-ratio: 1;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-1-1 {
    aspect-ratio: 1;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-1-1 {
    aspect-ratio: 1;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-1-1 {
    aspect-ratio: 1;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-1-1 {
    aspect-ratio: 1;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-1-1 {
    aspect-ratio: 1;
  }
}

.uw-framed-image--ratio-3-2 {
  aspect-ratio: 3 / 2;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-3-2 {
    aspect-ratio: 3 / 2;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-3-2 {
    aspect-ratio: 3 / 2;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-3-2 {
    aspect-ratio: 3 / 2;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-3-2 {
    aspect-ratio: 3 / 2;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-3-2 {
    aspect-ratio: 3 / 2;
  }
}

.uw-framed-image--ratio-3-4 {
  aspect-ratio: 3 / 4;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-3-4 {
    aspect-ratio: 3 / 4;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-3-4 {
    aspect-ratio: 3 / 4;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-3-4 {
    aspect-ratio: 3 / 4;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-3-4 {
    aspect-ratio: 3 / 4;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-3-4 {
    aspect-ratio: 3 / 4;
  }
}

.uw-framed-image--ratio-4-1 {
  aspect-ratio: 4;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-4-1 {
    aspect-ratio: 4;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-4-1 {
    aspect-ratio: 4;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-4-1 {
    aspect-ratio: 4;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-4-1 {
    aspect-ratio: 4;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-4-1 {
    aspect-ratio: 4;
  }
}

.uw-framed-image--ratio-4-3 {
  aspect-ratio: 4 / 3;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-4-3 {
    aspect-ratio: 4 / 3;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-4-3 {
    aspect-ratio: 4 / 3;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-4-3 {
    aspect-ratio: 4 / 3;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-4-3 {
    aspect-ratio: 4 / 3;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-4-3 {
    aspect-ratio: 4 / 3;
  }
}

.uw-framed-image--ratio-6-1 {
  aspect-ratio: 6;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-6-1 {
    aspect-ratio: 6;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-6-1 {
    aspect-ratio: 6;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-6-1 {
    aspect-ratio: 6;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-6-1 {
    aspect-ratio: 6;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-6-1 {
    aspect-ratio: 6;
  }
}

.uw-framed-image--ratio-9-16 {
  aspect-ratio: 9 / 16;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-9-16 {
    aspect-ratio: 9 / 16;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-9-16 {
    aspect-ratio: 9 / 16;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-9-16 {
    aspect-ratio: 9 / 16;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-9-16 {
    aspect-ratio: 9 / 16;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-9-16 {
    aspect-ratio: 9 / 16;
  }
}

.uw-framed-image--ratio-12-5 {
  aspect-ratio: 12 / 5;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-12-5 {
    aspect-ratio: 12 / 5;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-12-5 {
    aspect-ratio: 12 / 5;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-12-5 {
    aspect-ratio: 12 / 5;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-12-5 {
    aspect-ratio: 12 / 5;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-12-5 {
    aspect-ratio: 12 / 5;
  }
}

.uw-framed-image--ratio-16-9 {
  aspect-ratio: 16 / 9;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-16-9 {
    aspect-ratio: 16 / 9;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-16-9 {
    aspect-ratio: 16 / 9;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-16-9 {
    aspect-ratio: 16 / 9;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-16-9 {
    aspect-ratio: 16 / 9;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-16-9 {
    aspect-ratio: 16 / 9;
  }
}

.uw-framed-image--ratio-27-10 {
  aspect-ratio: 27 / 10;
}

@media (width >= 576px) {
  .uw-framed-image--ratio-sm-27-10 {
    aspect-ratio: 27 / 10;
  }
}

@media (width >= 768px) {
  .uw-framed-image--ratio-md-27-10 {
    aspect-ratio: 27 / 10;
  }
}

@media (width >= 992px) {
  .uw-framed-image--ratio-lg-27-10 {
    aspect-ratio: 27 / 10;
  }
}

@media (width >= 1200px) {
  .uw-framed-image--ratio-xl-27-10 {
    aspect-ratio: 27 / 10;
  }
}

@media (width >= 1400px) {
  .uw-framed-image--ratio-xxl-27-10 {
    aspect-ratio: 27 / 10;
  }
}