.header {

  @include header-links;

  color: $white;
  background-image: url($centos-img-motif);
  background-color: $dark;
  background-size: cover;
  background-position: top left;

  text-shadow: 0 0 5px $dark;

  &__home {
    display: flex;
    flex-wrap: wrap;

    padding-top: calc(#{$navbar-brand-height} * 4);
    margin-top: $navbar-brand-height;

    .card {
      background-color: transparent;
      border: none;
    }

    &__presentation {
      display: flex;
      flex-direction: column;
      justify-content: center;
      @extend .container;

      &__title, &__description, &__preamble, &__distributions {
      }

      &__description {
        @extend .lead;
      }

      &__distributions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        @include media-breakpoint-up(lg) { flex-wrap: nowrap; }

        .card {
          background: rgba(0, 0, 0, 0.3);
          margin-bottom: 15px;
          border-radius: 10px;
        }
        .card-body {
          text-align: left;
        }
        .card:nth-child(1) {
          @include media-breakpoint-up(lg) { margin-right: 15px; } 
        }
      }
    }

    &__shortcuts {
      background: rgba(0, 0, 0, 0.3);
      width: 100%;
      margin-top: calc(#{$navbar-brand-height} * 4);

      .card {
        font-size: small;
      }

      &__community {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        @extend .container;
      }
    }
  }

  &__page {
    padding-top: calc(#{$navbar-brand-height} * 2);
    padding-bottom: calc(#{$navbar-brand-height} * 4);
    margin-top: $navbar-brand-height;

    display: flex;
    justify-content: center;
    flex-direction: column;

    &__title, &__description {
      @extend .container;
      text-shadow: 0 0 5px $dark;
    }

    &__description {
      @extend .lead;
    }
  }

  &__blog, &__post {
    padding-top: calc(#{$navbar-brand-height} * 2);
    padding-bottom: calc(#{$navbar-brand-height} * 4);
    margin-top: $navbar-brand-height;

    display: flex;
    justify-content: space-between;
    flex-direction: row;

    &__newer, &__older {
      padding: 0.5em;
      font-size: $h3-font-size;
      color: $white;
      background: $dark;
      opacity: 0.3;
      &:hover {
        opacity: 0.65;
      }
      &--disabled {
        opacity: 0;
        &:hover {
          opacity: 0;
        }
      }
    }
    &__present {
      @extend .container;
    }
    &__title, &__description {
      text-shadow: 0 0 5px $dark;
    }
    &__description {
      @extend .lead;
    }
  }
}