.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;
  }
}

}