.row--gutter {
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
}

a {
  color: #727272;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: color 0.5s ease;
}
.ux-info-banner[type=info] a:hover {
  color: #fff;
}
.ux-info-banner[type=error] a:hover {
  color: #ff0201;
}
a:hover {
  color: #131313;
}

.row--gutter {
  margin-left: -15px;
  margin-right: -15px;
  overflow: hidden;
}

/**
@prop --aspect-ratio-mobile: Aspect ratio for the image container on mobile devices (default is 3 / 2).
@prop --aspect-ratio-desktop: Aspect ratio for the image container on desktop devices (default is 3 / 1).
@prop --button-bg-color: Color of the zoom button background (default is #fff).
@prop --button-fg-color: Color of the zoom button icon (default is #000).
@prop --max-zoom: Maximum zoom level for the image (default is 150%).
@prop --z-index-fullscreen: Z-index for the zoomed image in fullscreen mode (default is 1000).
*/
ux-iws-nb-image-zoom {
  --aspect-ratio-mobile: var(--aspect-ratio-mobile, 3 / 2);
  --aspect-ratio-desktop: var(--aspect-ratio-desktop, 3 / 1);
  --button-bg-color: var(--button-bg-color, #fff);
  --button-fg-color: var(--button-fg-color, #000);
  --max-zoom: var(--max-zoom, 150%);
  --z-index-fullscreen: var(--z-index-fullscreen, 1000);
}

.ux-iws-nb-image-zoom {
  display: block;
  overflow: hidden;
  position: relative;
}
.ux-iws-nb-image-zoom__container {
  width: 100%;
  aspect-ratio: var(--aspect-ratio-mobile, 3/2);
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  .ux-iws-nb-image-zoom__container {
    aspect-ratio: var(--aspect-ratio-desktop, 3/1);
  }
}
.ux-iws-nb-image-zoom__image {
  position: absolute;
  inset: 0;
}
.ux-iws-nb-image-zoom__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ux-iws-nb-image-zoom__zoom-image {
  position: absolute;
  inset: 0;
  display: none;
}
.ux-iws-nb-image-zoom__zoom-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: var(--max-zoom, 150%);
}
.ux-iws-nb-image-zoom__zoom-button {
  appearance: none;
  cursor: pointer;
  background-color: var(--button-bg-color, #fff);
  color: var(--button-fg-color, #000);
  border: 0 none transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: absolute;
  right: 30px;
  bottom: 30px;
}
.ux-iws-nb-image-zoom ux-icon {
  display: none;
  font-size: 20px;
}
.ux-iws-nb-image-zoom ux-icon[rel=zoom-in] {
  display: block;
}
.ux-iws-nb-image-zoom[is-zoomed] ux-icon[rel=zoom-in] {
  display: none;
}
.ux-iws-nb-image-zoom[is-zoomed] ux-icon[rel=zoom-out] {
  display: block;
}
.ux-iws-nb-image-zoom[is-zoomed] .ux-iws-nb-image-zoom__zoom-image {
  display: block;
}

/** Fullscreen on small devices */
@media (max-width: 900px) {
  .ux-iws-nb-image-zoom[is-zoomed] {
    aspect-ratio: var(--aspect-ratio-mobile, 3/2);
  }
  .ux-iws-nb-image-zoom[is-zoomed] .ux-iws-nb-image-zoom__container {
    position: fixed;
    aspect-ratio: unset;
    inset: 0;
    z-index: var(--z-index-fullscreen, 1000);
  }
  .ux-iws-nb-image-zoom[is-zoomed] .ux-iws-nb-image-zoom__zoom-image img {
    min-height: 100%;
    min-width: 100%;
    max-width: none;
  }
}