@use '../helpers/functions' as *;

.case-study {
  display: flex;
  flex-direction: column;
  background-color: $neutral-10;
  border-radius: $spacer * 0.5;
  overflow: hidden;
  position: relative;

  &__content {
    position: relative;
    padding: $spacer * 2.5 $spacer * 1.5;
  }

  &__logo {
    align-self: flex-start;
    height: pxToRem(64);
    margin-bottom: $spacer * 1.5;
  }

  &__title {
    color: $neutral-98;
    margin-bottom: $spacer * 1.5;
  }

  &__description {
    font-size: pxToRem(18);
    line-height: pxToRem(27);
    color: $neutral-70;
    margin-bottom: $spacer * 1.5;
    b {
      color: $neutral-98;
    }
  }

  &__preview {
    position: relative;
    align-self: flex-end;
    width: calc(100% - 24px);
    max-width: pxToRem(440);
    margin-left: $spacer * 1.5;
    background-image: url('/img/case-study-bg.svg');
    background-size: 100%;
    background-position: left top;
    background-repeat: no-repeat;
    z-index: 1;

    &-image {
      width: 100%;
      padding: pxToRem(28) 0 0 pxToRem(28);
    }

    &-overlay {
      position: absolute;
      left: -20%;
      bottom: 0;
      width: 100%;
      height: 0;
      padding-bottom: 79%;
      background-image: url('/img/blurred/blurred-light-13.svg');
      background-position: top;
      background-size: cover;
      border-radius: 0 pxToRem(12) 0 0;
      z-index: -1;
    }
  }

  @include media-breakpoint-up(xl) {
    flex-direction: row;
    justify-content: space-between;

    &__content {
      display: flex;
      flex-direction: column;
      min-height: pxToRem(472);
      padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
    }

    &__link {
      flex-grow: 1;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
    }

    &__tiitle {
      width: pxToRem(520);
    }

    &__description {
      width: pxToRem(520);
      //margin-bottom: $spacer * 5;
    }

    &__preview {
      &-image {
        padding: $spacer * 2.5 0 0 $spacer * 2.5;
      }

      &-overlay {
        width: pxToRem(597);
        height: pxToRem(538);
        left: -150px;
      }
    }
  }
}