/**
 * Mixin for fluid type.
 * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
 */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:host {
  display: block;
}
.hy-two-columns {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.hy-two-columns h2,
.hy-two-columns h3,
.hy-two-columns h4,
.hy-two-columns h5,
.hy-two-columns h6 {
  margin-top: 0;
}
.hy-two-columns p {
  margin-top: 0;
}
@media (min-width: 30rem) {
  .hy-two-columns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
.hy-two-columns--reversed {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (min-width: 30rem) {
  .hy-two-columns--reversed {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}
.hy-two-columns--reversed .hy-two-columns__item--side {
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 30rem) {
  .hy-two-columns--reversed .hy-two-columns__item--side {
    margin-right: 5.79%;
  }
}
@media (min-width: 60rem) {
  .hy-two-columns--reversed .hy-two-columns__item--side {
    margin-right: 8.5%;
  }
}
@media (max-width: 30rem) {
  .hy-two-columns--mobile-reversed {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .hy-two-columns--mobile-reversed .hy-two-columns__item--side {
    margin-top: 5.79%;
  }
}
.hy-two-columns__item {
  width: 100%;
}
.hy-two-columns__item [slot=main] {
  width: 100%;
}
.hy-two-columns__item [slot=main] .hy-paragraph-text {
  width: 100% !important;
}
.hy-two-columns__item [slot=side] {
  width: 100%;
}
.hy-two-columns__item--main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  width: 100%;
}
@media (min-width: 30rem) {
  .hy-two-columns__item--main {
    -ms-flex-preferred-size: 67.01%;
    flex-basis: 67.01%;
  }
}
@media (min-width: 60rem) {
  .hy-two-columns__item--main {
    -ms-flex-preferred-size: 63%;
    flex-basis: 63%;
  }
}
.hy-two-columns__item--side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
@media (min-width: 30rem) {
  .hy-two-columns__item--side {
    -ms-flex-preferred-size: 32.99%;
    flex-basis: 32.99%;
    margin-left: 5.79%;
  }
}
@media (min-width: 60rem) {
  .hy-two-columns__item--side {
    -ms-flex-preferred-size: 37%;
    flex-basis: 37%;
    margin-left: 8.5%;
    padding: 0;
  }
}
.hy-two-columns__item--side hy-key-figure {
  padding: 0 10.67%;
}
@media (min-width: 30rem) {
  .hy-two-columns__item--side hy-key-figure {
    padding: 0;
  }
}