:root {
  --section-pad-top: 85px;
  --section-pad-btm: 85px;
}

/* TODO: Move to _basic-elements.scss */
:where(.section) img {
  max-width: 100%;
  height: auto;
}

/* TODO: Move to _wing.scss */
/* .wing__after keeps content from getting hidden beneath the wing */
.wing__after,
.wing__wrap {
  position: relative;
}

.wing {
  position: absolute;
  top: 0;
  height: 100%;
  width: 9999px;
  right: 0;
  background-color: inherit;
}

.wing--clear {
  background-color: transparent;
}

/* Requires .has-wing--right ancestor! */
.wing--right {
  left: 0;
  right: auto;
}

/* IMPORTANT: requires either overflow hidden ancestor or an exact width. Otherwise it'll exceed the viewport width. */
.has-wing--right {
  overflow: hidden;
}

/* TODO: Move to _footer.scss */
.footer__social-media {
  margin-top: 0;
}

.footer__social-media:not(:first-child) {
  margin-top: 65px;
}

.section__col {

  padding-top:    var(--section-pad-top); 
  padding-bottom: var(--section-pad-btm);

}

.section__col--a {
  padding-left: 0;
  /* padding-right: 128px; */
}

.image-block__text {

}

@media screen and (max-width: 89.937em) {
  .section {
    padding-left:  0;
    padding-right: 0;
  }
  .section__col {
    padding-left:  80px;
    padding-right: 80px;
  }
  :where(.section) .image-block__text {
    align-items: center;
  }
}

@media screen and (max-width: 63.937em) {
  
  /* .section {
    padding-top: 53px;
    padding-bottom: 60px;
  } */
  .section__inner {
    flex-flow: column;
  }
  .section__col {
    /* padding-right: 0;
    padding-left:  0; */
    width: 100%;
    margin-top: 0;
  } 

  .section__col+.section__col--bg-color-repeat {
    padding-top: 0;
  }

}

@media screen and (min-width: 63.937em) {
  .hidden\@md {
    display: none !important;
  }
}

/*
@media screen and (min-width: 64em) {
  .section[data-align=right] .section__inner {
    flex-flow:row-reverse
  }

  .section[data-align=right] .section__col--a {
    padding-right: 128px;
    padding-left: 0
  }
}

@media screen and (max-width: 63.937em) {
  .section[data-align-mobile=image] .section__inner {
    flex-flow:column
  }

  .section[data-align-mobile=image] .section__col--b {
    margin-top: 0px;
    margin-bottom: 60px
  }
} */

@media screen and (max-width: 49.937em) {
  .section {
    padding-left:  0;
    padding-right: 0;
  }
  .section__col {
    padding-left:  20px;
    padding-right: 20px;
  }
  .section__col--a {
    padding-left: 20px;
  }
}