@import "@/styles/variables";
@import "@/styles/mixins";

.container {
  background: $white;
  @include flex(flex-start, center, column);

  header,
  footer {
    width: 100%;
    text-align: center;
  }

  .backgroundContainer {
    position: relative;
    width: 100%;
    height: 32.5rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header {
    position: relative;
    z-index: 1;
    margin: $hl-1 auto 0;

    h5 {
      max-width: 530px;
      margin-left: auto;
      margin-right: auto;
    }

    &.headerBigTop {
      margin-top: 11.75rem;

      h5 {
        max-width: 32.5rem;
      }
    }
  }

  .KApartners {
    position: relative;
    top: -6.6rem;
    margin: 0 -1rem -2.85rem -1rem;
    @include flex(space-between, center);

    .KAcard {
      position: relative;
      flex: 1;
      height: 13.125rem;
      margin: 0 $hl-9;
      padding: $hl-7;
      overflow: hidden;
      @include card;

      .frontContainer {
        @include flex(space-between, flex-start, column);

        .logoContainer {
          height: 2.5rem;

          img {
            max-height: 100%;
            height: 40px;
          }
        }

        .title {
          color: $black;
          line-height: 1.75;
          text-align: left;
          margin-top: $hl-8;
          @include multi-line-ellipsis(2);
          @include h4;
        }
      }

      .descriptionContainer {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        height: 100%;
        width: 100%;
        opacity: 0;
        padding: $hl-7;
        background: $white;
        transition: 0.2s opacity linear;

        p {
          max-height: 100%;
          color: $black;
          text-align: left;
          line-height: 1.75;
          @include multi-line-ellipsis(5);
        }

        &:hover {
          opacity: 1;
          color: $font-color-6;
        }
      }

      a {
        &:hover {
          p {
            color: $font-color-6;
          }
        }
      }
    }
  }

  .footer {
    margin: $hl-4 auto $hl-2;
  }
}

.KAcard.KAcardClick {
  cursor: pointer;
}

@media (max-width: $max-desktop) {
  .container {
    .KApartners {
      @include flex(flex-start, center, column);

      .KAcard {
        width: calc(100% - 2rem);
        margin: $hl-9;

        &:first-of-type,
        &:last-of-type {
          margin-left: $hl-9;
          margin-right: $hl-9;
        }

        .frontContainer {
          .title {
            @include multi-line-ellipsis(2);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 620px) {
  .container .header {
    margin-top: $hl-3;
    &.headerBigTop {
      margin-top: $hl-1;
    }
  }
}