.footer {
  background: var(--background-footer);
  border-radius: 0;
  position: relative;
  width: 100%;

  .footer-inner {
    padding: var(--space-y-small-breakpoint-footer) 0;
    margin-left: var(--space-x-small-breakpoint-container);
    margin-right: var(--space-x-small-breakpoint-container);

    .footer-cta {
      margin-bottom: 80px;
      .footer-cta-text {
        .footer-cta-headline {
          color: #fff;
          font-size: 36px;
          font-style: normal;
          font-weight: 500;
          line-height: 133.333%;
          letter-spacing: -1px;
          margin-bottom: 10px;
          @media (width >= 992px) {
            font-size: 60px;
            line-height: 120%;
            margin-bottom: 20px;
          }
        }
        .footer-cta-description {
          color: #fff;
          font-size: 36px;
          font-style: normal;
          font-weight: 400;
          line-height: 133.333%;
          letter-spacing: -1px;
          & svg {
            height: 35px;
            width: 35px;
            @media (width >= 992px) {
              height: 55px;
              width: 55px;
            }
          }
          & a {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;

            &:hover {
              color: var(--accent-200);
              text-decoration: underline;
            }
          }
          @media (width >= 992px) {
            font-size: 60px;
            line-height: 120%;
            & svg {
              height: 55px;
            }
          }
        }
      }
    }

    .footer-brand {
      display: flex;
      margin-bottom: var(--space-y-block-small-breakpoint-footer-brand);

      & img,
      & svg {
        height: auto;
        width: var(--size-small-breakpoint-footer-brand);
      }
    }

    .footer-legal {
      color: var(--color-footer-legal);
      display: flex;
      row-gap: 15px;
      flex-direction: column;
      font-size: 1.25rem;
      font-weight: var(--weight-footer-legal);
      padding-top: 0;

      a {
        color: #fff;
        text-decoration: none;
        transition: color 0.2s;

        &:hover {
          color: var(--accent-200);
        }
      }

      .footer-text {
        flex-grow: 1;
      }

      .footer-links {
        color: var(--color-footer-links);
        display: block;
        columns: 2;
        margin-top: 1.25rem;

        .footer-links-item {
          font-size: 16px;
          cursor: pointer;
          &:not(:last-child) {
            margin-bottom: 22px;
          }
          &:hover {
            color: var(--accent-200);
          }
          & a {
            transition: color 0.2s;
            &:hover {
              color: var(--accent-200);
            }
          }
          & svg {
            width: 28px;
            height: 28px;
          }
        }
      }
    }
  }
}

@media (width >= 768px) {
  .footer {
    .footer-inner {
      padding: var(--space-y-medium-breakpoint-footer)
        var(--space-x-medium-breakpoint-footer);

      .footer-brand {
        & img,
        & svg {
          width: var(--size-medium-breakpoint-footer-brand);
        }

        margin-bottom: var(--space-y-block-medium-breakpoint-footer-brand);
      }
    }
  }
}

@media (width >= 992px) {
  .footer {
    .footer-inner {
      padding: var(--space-y-large-breakpoint-footer)
        var(--space-x-large-breakpoint-footer) 120px
        var(--space-x-large-breakpoint-footer);
      margin-left: auto;
      margin-right: auto;
      max-width: var(--max-width-container-extralarge);

      .footer-brand {
        justify-content: var(--horizontal-alignment-footer-brand);
        img,
        svg {
          width: var(--size-large-breakpoint-footer-brand);
        }

        margin-bottom: var(--space-y-block-large-breakpoint-footer-brand);
      }

      .footer-legal {
        flex-direction: row;
        font-size: 1.5rem;

        .footer-links {
          margin-top: 0;
          .footer-links-item {
            font-size: 1.25rem;
            &:not(:last-child) {
              margin-bottom: 3rem;
            }
          }
          display: block;
          column-gap: 48px;
          max-width: 450px;
          columns: 3;
        }
      }
    }
  }
}

@media (width >= 993px) and (width <= 1295px) {
  .footer-inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (width >= 1200px) {
  .footer-inner {
    max-width: var(--max-width-container-extralarge);
  }
}

@media (width >= 1300px) {
  .footer-inner {
    margin-left: auto;
    margin-right: auto;
  }
}