@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.authContentCard {
  border-radius: 40px;
  padding: 20px;
  position: relative;
  color: $whiteColor;
  background: $secondaryColor url("../../../../../public/images/bg-map-image.webp");
  background-size: cover;

  @media (min-width: $xxl) {
    padding: 40px;
  }

  &::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 90px;
    mask-image: url("../../../../../public/images/auth-corner-pattern.svg");
    -webkit-mask-image: url("../../../../../public/images/auth-corner-pattern.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    right: 0;
    top: 0;
    background-color: $bgColor;

    @media (min-width: $md) {
      width: 145px;
      height: 110px;
    }
  }

  .mainTitle {
    max-width: calc(100% - 90px);
    margin-top: 10px;
    margin-bottom: 0;
    text-transform: capitalize;

    @media (min-width: $lg) {
      max-width: 300px;
    }

    @media (min-width: $xxl) {
      margin-top: 43px;
    }
  }

  .authSlider {
    margin-top: 25px;

    @media (min-width: $xxl) {
      margin-top: 40px;
    }

    .iconQuote {
      display: block;
      width: 16px;
      height: 16px;
      background-color: $whiteColor;
      margin-bottom: 20px;

      @media (min-width: $xxl) {
        width: 18px;
        height: 18px;
        margin-bottom: 40px;
      }
    }

    .slideContent {
      @media (min-width: $lg) {
        padding-right: 20px;
      }

      @media (min-width: $xxl) {
        padding-right: 50px;
      }

      > p {
        font-weight: $fw500;
      }

      .userDetail {
        .title {
          font-weight: $fw500;
          line-height: 1.5;
          margin: 0;
        }
      }
    }
  }

  .findRemoteWork {
    background-color: $whiteColor;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;

    @media (min-width: $xl) {
      flex-direction: row;
      gap: 26px;
      padding: 25px;
      border-radius: 40px;
    }

    @media (min-width: $xxl) {
      margin-top: 46px;
      padding: 44px 34px;
    }

    .remoteUserContent {
      .title {
        color: $blackColor;
      }

      p {
        color: $grey475Color;
      }
    }

    .remoteUserImages {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      overflow: hidden;

      img {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        margin-left: -12px;

        @media (min-width: $md) {
          width: 40px;
          height: 40px;
        }

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  h1,
  .h1 {
    font-size: $fs26;
    line-height: 1.25;
    font-weight: $fw500;

    @media (min-width: $md) {
      font-size: $fs28;
    }

    @media (min-width: $lg) {
      font-size: $fs30;
    }

    @media (min-width: $xxl) {
      font-size: $fs36;
    }

    @media (min-width: $xxxl) {
      font-size: $fs40;
    }
  }
  .h4 {
    font-size: $fs20;
    line-height: 1.25;
    font-weight: $fw700;
    @media (min-width: $md) {
      font-size: $fs22;
    }
    @media (min-width: $xl) {
      font-size: $fs26;
    }
    @media (min-width: $xxl) {
      font-size: $fs26;
    }
  }
}