.footer-top {
  position: relative;
  clear: both;
  padding: 1.563rem .5rem;
  text-align: center;

  @media (min-width: $break-medium) {
    display: flex;
    padding: 0;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100vw - var(--scrollbar-width));
    height: 100%;
    background-color: $color-blue-dark;
    background-image: url("../assets/img/footer-sock-bg.jpg");
    background-size: cover;
    transform: translateX(-50%);
    z-index: -1;
  }

  .section-nav + .container & {
    @media (min-width: $break-large) {
      margin-left: -24rem;
    }
  }

  .footer-sock {
    padding: 0;

    @media (min-width: $break-medium) {
      padding: 4.25rem 0;
      flex-grow: 1;
    }

    @media (min-width: $break-medium) {

    }

    .section-nav + .container & {
      @media (min-width: $break-large) {
        padding: 8.3rem 3rem 8.3rem 0;
      }
    }
  }

  .section__header {
    margin: 0 0 1.125rem;
    color: $color-white;
    flex-shrink: 0;

    @media (min-width: $break-medium) {
      margin: 0 0 2.625rem;
    }

    span {
      display: block;
      margin-bottom: .5rem;

      @media (min-width: $break-medium) {
        @include fontsize(20px);
        margin-bottom: 0;
      }
    }

    h2 {
      margin: 0;
    }
  }

  .cta-list {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    @media (min-width: $break-medium) {
      gap: 20px;
    }

    &__item {
      margin: 0;
      padding: 0;
      list-style: none;
      &:before {
        display: none;
      }
    }

    &__holder {
      margin: 0;
    }

    .cta--button {
      margin: 0;
      @include cta(secondary, $color-blue-dark);
      border: 1px solid $color-white;
      border-radius: 8px;
      padding: 0.75rem 1.5rem;

      &:hover {
        color: $color-blue-dark !important;
        border-color: $color-blue-dark;
      }

      @media (min-width: $break-medium) {
        @include fontsize(20px);
      }

      &:hover {
        color: $color-white;
      }

      &:focus {
        @include focus-light();
      }

      &:after {
        width: 0.7rem;
        height: 0.7rem;

        @media (min-width: $break-medium) {
          width: 1.1rem;
          height: 1.1rem;
        }

        @media (min-width: $break-large) {
          border-width: 0.4rem;
        }
      }
    }
  }
}

.footer-wrapper {
  position: relative;
}

.go-to-top-button {
  display: none;
  position: absolute;
  top: 0;
  right: -1rem;
  min-width: 9.5rem;
  min-height: 3.25rem;
  border-radius: 0 0 8px 8px;
  padding: 17px 16px 17px 40px;
  border: none;
  background-color: $color-white;
  transition: background-color .3s ease;
  @include focus-light;
  outline-offset: -4px;
  z-index: 1000;

  &:hover {
    background-color: $color-blue-light;
  }

  &:focus {
    @include focus-light();

    outline-offset: 5px;
  }

  span {
    position: relative;
    @include fontsize(18px);
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      margin-left: calc(-0.625rem - .813rem);
      width: 0.813rem;
      height: 1.313rem;
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='21' viewBox='0 0 14 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.36819L6.752 0.000188828L13.44 6.36819V9.24819L7.936 4.03219L7.936 20.0962H5.536L5.536 4.03219L0 9.24819L0 6.36819Z' fill='%2327003F'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  @media (min-width: $break-large) {
    display: block;
  }
}