:root {
  --black: #111;
  --color-text: var(--black);
  --color-body: var(--white);
  --font-primary: 'Open Sans', helvetica, arial, sans-serif;
  --font-secondary: 'Open Sans', helvetica, arial, sans-serif;
  --heading-letter-spacing: -0.32px;
  --heading-font-family: var(--font-primary);
  --page-width: $bp-large;
  --base-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.whitespace {
  padding: 0.2em;
}

.featured-content {
  position: relative;
}

.feature {
  position: sticky;
  top: 0;
  width: 100%;
  background: linear-gradient( 0deg, rgb(223,223,221) 50%, rgb(247,247,245) 100%);
}
@media (min-width: 1200px) {
  .feature {
    overflow: hidden;
    height: 60vh;
  }
}
@media (min-width: 1200px) {
  .feature:nth-child(odd) .feature-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
            flex-direction: row-reverse;
  }
  .feature:nth-child(odd) .feature-image-container {
    margin-right: 4rem;
    -webkit-transform: translateX(-2rem);
            transform: translateX(-2rem);
  }
  .feature:nth-child(odd).show-feature .feature-image-container {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@media (min-width: 1200px) {
  .feature:nth-child(even) .feature-inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
  }
  .feature:nth-child(even) .feature-image-container {
    margin-left: 4rem;
    -webkit-transform: translateX(2rem);
            transform: translateX(2rem);
  }
  .feature:nth-child(even).show-feature .feature-image-container {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

.feature-inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  padding: 2rem;
  width: 100%;
  max-width: 1450px;
}
@media (min-width: 1200px) {
  .feature-inner {
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    /* position: fixed; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 60vh;
  }
}
.feature-inner > * {
  -webkit-box-flex: 0;
          flex: 0 1 50%;
}

.feature-image-container {
  position: relative;
  margin-top: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
  transition: opacity 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
  transition: opacity 0.5s var(--base-timing-function), transform 0.5s var(--base-timing-function);
  transition: opacity 0.5s var(--base-timing-function), transform 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
}
.show-feature .feature-image-container {
  opacity: 1;
}
@media (min-width: 1200px) {
  /* .feature-image-container {
    margin-top: 0;
    max-width: 70vmin;
  } */
}
.feature-image-container img {
  position: relative;
  width: 100%;
  vertical-align: bottom;
  z-index: 2;
}

.feature-copy {
          position: relative;
          z-index: 2;
          opacity: 0;
          -webkit-transform: translateY(2rem);
          transform: translateY(2rem);
          -webkit-transition: opacity 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
          transition: opacity 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
          transition: opacity 0.5s var(--base-timing-function), transform 0.5s var(--base-timing-function);
          transition: opacity 0.5s var(--base-timing-function), transform 0.5s var(--base-timing-function), -webkit-transform 0.5s var(--base-timing-function);
          -moz-transform: translateY(2rem);
          -ms-transform: translateY(2rem);
          -o-transform: translateY(2rem);
}
.show-feature .feature-copy {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.feature-headline {
  font-size: calc(1rem + 5vmin);
  font-family: var(--heading-font-family);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.feature-text {
  margin-top: 2rem;
  font-size: calc(1rem + 0.5vmin);
  font-family: var(--font-secondary);
  line-height: 1.4;
}