:root {
  --uw-media-frame-bg: #f5f5f5;
}

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

.pattern-media-image--wrapped {
  width: 100%;
}

.pattern-media-image--wrapped .pattern-media-image__media {
  background-color: var(--uw-media-frame-bg);
  aspect-ratio: 3 / 2;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pattern-media-image--wrapped picture {
  display: contents;
}

.pattern-media-image--wrapped img {
  width: auto;
  max-height: 100%;
}

.pattern-media-image--ratio-1-1 .pattern-media-image__media {
  aspect-ratio: 1;
}

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

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

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

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

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

.pattern-media-image--ratio-3-2 .pattern-media-image__media {
  aspect-ratio: 3 / 2;
}

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

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

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

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

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

.pattern-media-image--ratio-3-4 .pattern-media-image__media {
  aspect-ratio: 3 / 4;
}

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

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

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

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

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

.pattern-media-image--ratio-4-1 .pattern-media-image__media {
  aspect-ratio: 4;
}

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

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

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

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

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

.pattern-media-image--ratio-4-3 .pattern-media-image__media {
  aspect-ratio: 4 / 3;
}

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

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

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

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

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

.pattern-media-image--ratio-6-1 .pattern-media-image__media {
  aspect-ratio: 6;
}

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

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

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

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

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

.pattern-media-image--ratio-9-16 .pattern-media-image__media {
  aspect-ratio: 9 / 16;
}

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

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

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

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

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

.pattern-media-image--ratio-12-5 .pattern-media-image__media {
  aspect-ratio: 12 / 5;
}

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

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

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

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

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

.pattern-media-image--ratio-16-9 .pattern-media-image__media {
  aspect-ratio: 16 / 9;
}

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

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

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

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

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

.pattern-media-image--ratio-27-10 .pattern-media-image__media {
  aspect-ratio: 27 / 10;
}

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

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

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

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

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

.pattern-media-image__download-button {
  margin: .25rem;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
}

.pattern-media-image__icon-placeholder {
  opacity: .6;
  transition: opacity .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pattern-media-image__icon-placeholder:after {
  z-index: -1;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  top: 1%;
  left: 1%;
}

.pattern-media-image__icon-placeholder svg {
  width: 45px !important;
  height: 45px !important;
}

.pattern-media-image:hover .pattern-media-image__icon-placeholder, .pattern-media-image:focus .pattern-media-image__icon-placeholder {
  opacity: 1;
}