@import './../../styles/variables/index.scss';
@import './../../styles/utils/index.scss';

.highlightContainer {
  display: flex;
  flex-direction: column;
  max-width: 1366px;
  margin: 0 auto;
  margin-bottom: 80px;

  @media (min-width: 560px) {
    padding: 0 32px;
    margin-bottom: 104px;
  }

  @media (min-width: 900px) {
    padding: 0 43px;
    flex-direction: row;
  }

  .imageContainer {
    width: 100%;

    @media (min-width: 900px) {
      max-width: ruleOfThree(1280px, 100%, 812px);
    }

    img {
      object-fit: cover;
      object-position: center;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;

    @media (min-width: 900px) {
      max-width: ruleOfThree(1280px, 100%, 468px);
    }
  }

  .contentTitle {
    background: $dark-blue;
    padding: 40px 32px;
    color: $white;

    @media (min-width: 560px) {
      padding: 64px;
    }

    &.fullHeight {
      flex: 1;
    }

    .medium_text {
      margin-top: 0;
      font-family: $font-family-newsreader;
      color: $white;
      font-weight: normal;
      @media (min-width: 560px) {
        font-size: 50px;
        line-height: 60px;
      }
      @media (min-width: 900px) {
        font-size: 36px;
        line-height: 38px;
      }
      @media (min-width: 980px) {
        font-size: 40px;
        line-height: 42px;
      }
      @media (min-width: 1140px) {
        font-size: 50px;
        line-height: 52px;
      }
    }
  }

  .contentDescription {
    padding: 32px;
    @media (min-width: 560px) {
      padding: 48px 64px;
    }
    @media (min-width: 900px) {
      padding: 60px 64px 40px;
    }
  }

  .chevron {
    width: 4.88px;
    height: 8.92px;
    margin-right: 3px;
  }

  .keywords {
    margin-top: 32px;

    @media (min-width: 900px) {
      margin-top: 72px;
    }
  }

  &:first-of-type {
    margin-top: 70px;
    @media (min-width: 900px) {
      margin-top: 80px;
    }
  }
}