/* =============================================================================
   Footer
   ========================================================================== */

@scope (.footer) {
  :scope {
    position: relative;
    background-color: var(--color-green);
    color: var(--color-white);
    background-image: url('../../images/logo_wasserzeichen.svg');
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: contain;
    background-attachment: scroll;
  }

  .footer-padding {
    padding-inline: var(--padding-inline);
  }

  .padding-section-footer {
    padding-top: var(--space-block);
  }

  .footer__top-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 2fr repeat(4, minmax(16px, 1fr));
    grid-auto-columns: 1fr;
    align-items: start;
    gap: 16px 4vw;
  }

  .footer__logo-link {
    position: relative;
    float: none;
    display: block;
    width: 14rem;
    height: auto;
    padding-left: 0;
    color: #333;
    text-decoration: none;
  }

  .footer_logo {
    mix-blend-mode: normal;
  }

  .footer_logo.lighten {
    opacity: 0.68;
    mix-blend-mode: lighten;
  }

  .footer_spacing-block-3 {
    width: 100%;
    padding-bottom: 6rem;
  }

  .footer_spacing-block-2 {
    width: 100%;
    padding-bottom: 1.5rem;
  }

  .footer_text {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.5;
  }

  .text-style-small {
    margin-block: 0;
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.5;
  }

  .footer_link {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.6;
    }
  }

  .footer__link-list {
    display: flex;
    flex-direction: column;
    place-items: flex-start start;
    gap: var(--space-tiny);
  }

  .footer_partner-link {
    position: relative;
    float: none;
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1rem;
    padding-left: 0;
    color: #333;
    text-decoration: none;
  }

  .footer_spacing-block {
    width: 100%;
    padding-bottom: 5rem;
  }

  .footer_line-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-green-brighter);
    opacity: 0.5;
  }

  .footer_spacing-block2 {
    width: 100%;
    padding-bottom: 2rem;
  }

  .footer_bottom-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: max-content;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    justify-content: center;
    gap: 0 1.5rem;
    white-space: normal;
  }

  .footer_credit-text {
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .footer_legal-link {
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.6;
    }
  }

  @media (width <= 991px) {
    :scope {
      background-position: 100%;
      background-size: cover;
    }

    .footer_spacing-block {
      padding-bottom: 4.5rem;
    }

    .padding-section-footer {
      padding-top: 4.5rem;
    }

    .footer__left-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .footer__logo-link {
      width: 450px;
    }

    .footer_spacing-block-3 {
      padding-bottom: 4rem;
    }

    .footer__top-wrapper {
      grid-template-columns: 1fr;
      row-gap: 4rem;
    }

    .footer_partner-link {
      width: 450px;
    }
  }

  @media (width <= 767px) {
    .footer_spacing-block2 {
      padding-bottom: 1.5rem;
    }

    .footer_bottom-wrapper {
      grid-auto-flow: row;
      justify-items: center;
      gap: 1rem 0;
    }

    .footer_spacing-block {
      padding-bottom: 3rem;
    }

    .footer_credit-text {
      grid-area: 3 / 1 / 4 / 2;
      margin-top: 1rem;
    }

    .padding-section-footer {
      padding-top: 3rem;
      padding-bottom: 0;
    }

    .footer_spacing-block-3 {
      padding-bottom: 1.5rem;
    }

    .footer_spacing-block-2 {
      padding-bottom: 1.25rem;
    }

    .footer__top-wrapper {
      row-gap: 3rem;
    }
  }

  @media (width <= 479px) {
    :scope {
      background-position: 50% 0;
      background-size: cover;
    }

    .footer_logo {
      margin-inline: auto;
    }

    .footer__left-wrapper {
      flex-flow: column;
      justify-content: space-between;
      align-items: flex-start;
    }

    .footer__logo-link {
      width: 240px;
    }

    .footer_partner-link {
      width: 240px;
    }
  }
}