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

.box {
  height: calc(100vw * .666);
  width: 100%;
  @media #{$breakpoint-medium} {
    width: calc(50% + (100vw - 100%) / 2 - 24px);
    right: calc(((100vw - 100%) / 2) * -1);
    height: calc(100% + 48px);
    top: -24px;
  }
  @media #{$breakpoint-large} {
    width: calc(66% + (100vw - 100%) / 2 - 32px);
    right: calc((((100vw - 100%) / 2)) * -1);
    // right: calc((((100vw - 100%) / 2) - 7px) * -1); // cant use because of OSX transparent scrollbar
    height: calc(100% + 32px);
    top: -16px;
  }
}