/* BEGIN PARALLAX */
/*
m-img__parallax
:.. m-img__parallax-image
*/

.m-img__parallax {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.m-img__parallax--overlay::before {
  position: absolute;
  inset: 0;
  z-index: 10;
  content: "";
  background-color: var(--v-color__dark--alpha--alt3);
}

/* Everything else in the section sits above the parallax image */
.m-img__parallax > *:not(.m-img__parallax-image) {
  position: relative;
  z-index: 50;
}

.m-img__parallax-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The picture is oversized — JS reads this height to calculate parallax travel.
   Adjust height to control speed: 120% = subtle, 150% = medium, 200% = dramatic.
   The image will never go out of bounds. */
.m-img__parallax-image .is-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  will-change: transform;
}

.m-img__parallax-image .is-picture-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* END PARALLAX */

.is-picture.m-img__style1,
.m-img__style1 > .is-picture {
  aspect-ratio: 300 / 200;
  border-radius: var(--v-border-radius__sm);
  overflow: hidden;
}

.is-picture.m-img__style1 > .is-picture-img,
.m-img__style1 > .is-picture > .is-picture-img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}

.is-picture.m-img__style2,
.m-img__style2 > .is-picture,
.m-img__style2 > .w153-pbd-element__inner--0 > .is-picture {
  border-radius: var(--v-border-radius__sm);
  overflow: hidden;
}

img.m-img-size__md,
.m-img-size__md .is-picture-img {
  max-width: 20rem;
}

@media (max-width: 699px) {
  .m-img-width__md---sm {
    max-width: 15rem;
    margin: 0 auto;
  }
}