anes/components/header/header.scss

@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-header {
  width: 100%;
  background: $light-grey;

  .image {
    width: 100%;
  }

  .title {
    display: block;
    font-size: $font-40;
    font-weight: 300;
    line-height: 45px;
    color: $blue;
    padding: 40px 0 5px 0;
    margin: 0;

    &:after {
      display: block;
      content: '';
      height: 2px;
      margin-top: 20px;
      width: 100%;
      background: linear-gradient(to right, $blue, $light-grey);
    }
  }

  .subtitle {
    font-size: $font-18;
    font-weight: bold;
    line-height: 20px;
    color: $dark-grey;
    padding: 25px 0;
    margin: 0;
    text-transform: uppercase;
  }

  .text {
    font-size: $font-18;
    font-weight: normal;
    line-height: 25px;
    padding-bottom: 50px;
    margin: 0;
    color: $dark-grey;
  }

  .line {
    background: $yellow;
    min-height: 70px;
    text-align: center;

    .container {
      min-height: 70px;
      line-height: 70px;

      .line-text {
        display: inline-block;
        color: $black;
        font-size: $font-18;
        text-transform: uppercase;
        font-weight: normal;
      }

      .code {
        display: inline-block;
        color: $black;
        font-size: $font-32;
        font-weight: bold;
      }
    }
  }
}


@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-header {

    .title {
      font-size: $font-50;
      line-height: 60px;
    }

    .subtitle {
      font-size: $font-18;
    }

    .text {
      font-size: $font-18;
    }

    .line {
      .container {
        line-height: 70px;
        .line-text {
          font-size: $font-18;
        }

        .code {
          font-size: $font-32;
        }
      }
    }
  }
}