/* Functions & Mixins */
/* ==== Containers & Responsive Mixins ==== */
/* Defines convenience mixins for common breakpoint targets.
these are small, medium, mediumlarge, and large. These variables should be defined prior to use.
*/
/* Universal breakpoints */
.dual-inverse {
  margin-bottom: 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  .dual-inverse *, .dual-inverse *::before, .dual-inverse::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .dual-inverse__inner {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 82.5rem; }
    @media (min-width: 768px) {
      .dual-inverse__inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (min-width: 1280px) {
      .dual-inverse__inner {
        padding-left: 5rem;
        padding-right: 5rem; } }
    @media (min-width: 768px) {
      .dual-inverse__inner {
        width: 85rem; } }
    @media (min-width: 1280px) {
      .dual-inverse__inner {
        width: 90rem; } }
    @media screen and (min-width: 48rem) {
      .dual-inverse__inner {
        display: grid;
        grid-template-columns: 1fr 1.5fr; } }
  .dual-inverse__initial, .dual-inverse__last {
    padding: 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    @media screen and (min-width: 30rem) {
      .dual-inverse__initial, .dual-inverse__last {
        padding: 1.5rem 2rem; } }
    @media screen and (min-width: 64rem) {
      .dual-inverse__initial, .dual-inverse__last {
        padding: 2rem; } }
  .dual-inverse__initial {
    background-color: #fff;
    border: 3px solid #868686; }
    @media (min-width: 768px) {
      .dual-inverse__initial {
        border-right: transparent; } }
    @media (max-width: 767px) {
      .dual-inverse__initial {
        border-bottom: transparent; } }
    @media screen and (min-width: 80rem) {
      .dual-inverse__initial {
        padding: 2.5rem;
        border-right: 3px solid #868686; } }
  .dual-inverse__last {
    background-color: #3b3c43; }
    @media screen and (min-width: 90rem) {
      .dual-inverse__last {
        padding: 2.75rem 3.25rem; } }
  .dual-inverse__title {
    margin: 0;
    color: #3b3c43;
    font-weight: 400;
    line-height: 1;
    font-size: 32px;
    font-size: 2rem; }
    @media screen and (min-width: 22.5rem) {
      .dual-inverse__title {
        font-size: 34px;
        font-size: 2.125rem; } }
    @media screen and (min-width: 48rem) {
      .dual-inverse__title {
        font-size: 40px;
        font-size: 2.5rem; } }
    @media screen and (min-width: 80rem) {
      .dual-inverse__title {
        font-size: 42px;
        font-size: 2.625rem; } }
    @media screen and (min-width: 90rem) {
      .dual-inverse__title {
        font-size: 50px;
        font-size: 3.125rem; } }
  .dual-inverse__text {
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0; }
    @media screen and (min-width: 30rem) {
      .dual-inverse__text {
        font-size: 18px;
        font-size: 1.125rem; } }
    @media screen and (min-width: 48rem) {
      .dual-inverse__text {
        font-size: 21px;
        font-size: 1.3125rem; } }
    @media screen and (min-width: 80rem) {
      .dual-inverse__text {
        font-size: 24px;
        font-size: 1.5rem; } }