.o-mwt {
  --h-offset-factor: calc(var(--offset-h) / 100);
  --image-h-offset: calc((var(--image-2-width) * 1%) * var(--h-offset-factor));
  --image-partition-left: calc(
    var(--image-2-width) * 1% - var(--image-h-offset)
  );
  --image-partition-right: var(--image-h-offset);
  --large-image-align: start;
  --small-image-align: start;
  --type-color-heading: var(--color-heading);
  --grid-columns: [image-start] 1fr [image-small-start]
    var(--image-partition-left) [image-end] var(--image-partition-right)
    [image-small-end];
  --grid-rows: [image-small-start] calc(var(--offset-v) * 1px) [image-start] 1fr
    [image-small-end image-end];
  position: relative;
}
.o-mwt:has(.o-mwt__media-position--right) {
  --grid-columns: [image-small-start] var(--image-partition-right)
    [image-start] var(--image-partition-left) [image-small-end] 1fr
    [image-end];
}
.o-mwt:has(.o-mwt__image--small-bottom) {
  --grid-rows: [image-start image-small-start] 1fr [image-end]
    calc(var(--offset-v) * 1px) [image-small-end];
  --small-image-align: end;
}
@media screen and (max-width: 768px) {
  .o-mwt:has(.o-mwt__image--small.a-hide--mobile) {
    --grid-columns: [image-start image-small-start] 1fr [image-end
      image-small-end];
    --grid-rows: [image-start image-small-start] 1fr [image-end
      image-small-end];
  }
}
.o-mwt img {
  display: block;
  margin: 0;
}
.o-mwt__media-position--left {
  order: 1;
}
.o-mwt__media-position--right {
  order: 1;
}
.o-mwt__content-position--left {
  order: 2;
  display: flex;
  justify-content: start;
}
.o-mwt__content-position--right {
  order: 2;
  display: flex;
  justify-content: end;
}
@media screen and (min-width: 768px) {
  .o-mwt .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.8rem;
  }
}
.o-mwt .grid > * {
  width: auto;
}
@media screen and (min-width: 768px) {
  .o-mwt__media-position--left, .o-mwt__content-position--left {
    order: 1;
  }
  .o-mwt__media-position--right, .o-mwt__content-position--right {
    order: 2;
  }
}
.o-mwt__content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .o-mwt__content {
    max-width: var(--max-width);
  }
}
.o-mwt__image {
  position: relative;
  isolation: isolate;
}
.o-mwt__image img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 768px) {
  .o-mwt__image--small {
    z-index: 2;
  }
}
.o-mwt__image--small img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .o-mwt__inner:not(.o-section__constrict) .o-mwt__content-position--right,
  .o-mwt__inner:not(.o-section__constrict) .o-mwt__content-position--left {
    margin-right: auto;
    margin-left: auto;
    max-width: var(--layout-container-width);
    padding-right: var(--layout-site-padding);
    padding-left: var(--layout-site-padding);
    width: 100%;
  }
}
.o-mwt__inner--media-outside-container img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .o-mwt__inner--media-outside-container .o-mwt__content-position--right {
    margin-right: auto;
    max-width: calc(var(--layout-container-width) / 2);
    padding-right: var(--layout-site-padding);
  }
}
@media screen and (min-width: 768px) {
  .o-mwt__inner--media-outside-container .o-mwt__content-position--left {
    margin-left: auto;
    max-width: calc(var(--layout-container-width) / 2);
    padding-left: var(--layout-site-padding);
  }
}
@media screen and (min-width: 768px) {
  .o-mwt__inner--fw .o-mwt__content-position--right {
    padding-right: var(--layout-site-padding);
  }
}
@media screen and (min-width: 768px) {
  .o-mwt__inner--fw .o-mwt__content-position--left {
    padding-left: var(--layout-site-padding);
  }
}
.o-mwt__media-two-images {
  display: grid;
  grid-template-columns: var(--grid-columns);
  grid-template-rows: var(--grid-rows);
}
.o-mwt__media-two-images .o-mwt__image {
  grid-column: image;
  grid-row: image;
  align-self: var(--large-image-align);
}
.o-mwt__media-two-images .o-mwt__image--small {
  z-index: 2;
  grid-column: image-small;
  grid-row: image-small;
  align-self: var(--small-image-align);
}
