@import "../../assets/scss/globals";


.hero-aside-section {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: center;
  flex: 4;

  @media screen and (max-width: 800px - 1px) {
    align-items: center;
  }

  text-align: left;
  padding: 3rem 1rem 2rem;

  &.dark-blue {
    background-color: color(dark-blue);

    h2 {
      color: color(light-blue);
    }

    p {
      font-weight: 100;
      color: color(white);
    }
  }

  &.light-turquoise {
    background-color: color(light-turquoise);

    h2,
    p {
      color: color(dark-blue);
    }
  }

  &.light-blue {
    background-color: color(light-blue);
  }
}