kodadot/nft-gallery

.footer-container {
  position: relative;
  border-top: 1px solid;
  @include ktheme() {
    background: theme('background-color');
  }

  .subtitle {
    word-break: normal;
    font-weight: 700;
  }

  .container {
    @apply z-[1] gap-[30px];
    @include mobile {
      flex-direction: column;
      gap: 50px;
      align-items: center !important;
    }
  }

  &-links {
    display: flex;
    flex-direction: column;
    gap: 3rem;

    @include widescreen() {
      display: contents;
    }
  }

  &-inner {
    @apply z-[1] relative gap-12;

    @include mobile {
      flex-direction: column;
      gap: 2rem;
      align-items: center !important;
    }
  }

  &-subs {
    @include mobile {
      align-items: center !important;
    }
  }

  &-info {
    @include mobile {
      align-items: center !important;
      .footer-container-list {
        display: flex;
        align-items: center;
        flex-direction: column;
      }
    }

    &-list {
      display: grid;
      grid-template-columns: repeat(2, auto);
      grid-gap: 10px;

      &-item {
        white-space: nowrap;
        a:hover {
          @include ktheme() {
            color: theme('link-hover');
          }
        }
        &:first-child {
          padding-left: 0px;
        }
      }
    }
  }

  &-socials {
    @include mobile {
      align-items: center !important;
    }
    &-list {
      @apply cursor-pointer flex-wrap gap-2;

      &-item {
        height: 33px;
        width: 33px;

        @include ktheme() {
          background: theme('background-color');
          border: 1px solid theme('border-color');
          box-shadow: theme('primary-shadow');
          &:hover {
            background: theme('k-accentHover');
            .icon, .o-icon {
              color: theme('text-color') !important;
            }
          }
        }
      }
    }
  }

  #custom-substack-embed .custom-substack-widget {
    @apply flex-row flex-nowrap h-[2.2rem] rounded-none;

    @include until-widescreen {
      flex-direction: column;
      height: 4.4rem;
    }
    @include ktheme() {
      box-shadow: theme('primary-shadow');
      border: 1px solid theme('border-color') !important;
    }

    input {
      @apply font-normal text-base leading-none pl-6 py-0 rounded-none;

      @include until-widescreen {
        flex-basis: 100%;
      }

      @include ktheme() {
        background: theme('background-color') !important;
        color: theme('text-color') !important;
        &::placeholder {
          color: theme('placeholder-color') !important;
        }
      }
    }
    button {
      font-size: 16px;
      font-weight: 400;
      padding: 0 28px;
      border-left: 1px solid;

      @include ktheme() {
        border-color: theme('border-color');
        &:hover {
          background: theme('background-color') !important;
          color: theme('text-color') !important;
        }
      }

      @include until-widescreen {
        width: 100%;
        border-left: none;
        border-top: 1px solid;
        padding: 0;
        justify-content: center;
        flex-basis: 100%;
      }
    }
  }

  .left-blurred-image {
    position: absolute;
    left: -20rem;
    top: -30rem;
  }

  .subtitle {
    @include ktheme() {
      color: theme('text-color');
    }
  }
}

.icons {
  &__list-item {
    padding: 0 2px;
  }
}