@import "@siteone/tachyons/tachyons/_variables.scss";

.box {
  height: calc(100vw * .666);
  width: 100%;
  @media #{$breakpoint-medium} {
    width: calc(50% + (100vw - 100%) / 2 - 24px);
    height: calc(100% + 48px);
    top: -24px;
    &:not(.reverse) {
      right: calc(((100vw - 100%) / 2) * -1);
    }
    &.reverse {
      left: calc(((100vw - 100%) / 2) * -1);
    }
  }
  @media #{$breakpoint-large} {
    width: calc(50% + (100vw - 100%) / 2 - 32px);
    height: calc(100% + 32px);
    top: -16px;
    &:not(.reverse) {
      right: calc((((100vw - 100%) / 2)) * -1);
    }
    &.reverse {
      left: calc((((100vw - 100%) / 2)) * -1);
    }
  }
}