$social-icon-height: 2em;
$footer-cover-height: 10em;

.footer {
  margin-top: 5em;

  .footer-cover-back {
    height: $footer-cover-height;
    background-image: url("https://s.werobot.fr/footerCover.jpeg");
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
  }

  .footer-cover {
    margin-top: -$footer-cover-height;
    height: $footer-cover-height;
    background-color: rgba(41, 128, 185, .8);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
  }

  .footer-border {
    display: flex;
    .footer-border-item {
      display: block;
      content: "";
      border-bottom: 1px solid black;
    }
    .footer-border-item:nth-child(1) {
      border-color: #bdc3c7;
      width: 100%;
    }
  }

  .footer-container {
    height: 20em;
    padding-top: 3em;
    padding-bottom: 3em;
    .footer-title-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2em;
      .footer-title {
        font-size: 1.8em;
        opacity: 0.9;
        margin-bottom: 0.5em;
      }
      .footer-description {
        opacity: 0.9;
        line-height: 1.5em;
      }
      .footer-logo {
        margin-right: 2.5em;
        img {
          width: 38em;
        }
      }
    }
    .footer-footer {
      margin-top: 3em;
      padding-bottom: 2em;
    }
    .footer-socials {
      margin-left: 1em;
      display: flex;
      justify-content: flex-start;

      .footer-socials-item {
        margin-right: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.8 !important;
        img, svg {
          width: $social-icon-height;
          height: $social-icon-height;
        }
        &:hover {
          opacity: 1 !important;
        }
      }
    }
    .footer-links {
      text-align: right;
      display: flex;
      flex-direction: column;
      a {
        margin-bottom: 10px;
        font-size: 1em;
        color: #2980b9;
      }
    }
  }
}

@media (max-width: $responsive-medium) {
  .footer {
    .footer-container {
      padding-top: 1em;
      .footer-title-container {
        flex-direction: column;
        text-align: center;
        .footer-logo {
          margin-right: 0;
          margin-bottom: 1em;
          img {
            display: flex;
            margin: 0 auto;
            width: 8em;
          }
        }
      }
      .footer-links {
        text-align: center;
        margin-top: 1em;
        margin-bottom: 1em;
      }
      .footer-footer {
        margin-top: 2em;
        padding-bottom: 2em;
      }
      .footer-socials {
        margin-left: 0;
        .footer-socials-item img {
          width: 2.4em;
          height: 2.4em;
        }
      }
    }
  }
}