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

.mediaCard {
  height: 100%;

  .mediaLink {
    display: block;
    position: relative;
    padding: 2rem;
    box-shadow: $shadow-normal;
    background-color: $white;
    border-radius: 0.625rem;
    height: 100%;

    &:hover {
      color: unset;

      .mediaContent {
        &.hasLogo {
          p {
            opacity: 1;
          }
        }
      }
    }

    .mediaLeft {
      margin: 0 0 1rem;
      height: 2.5rem;
      display: flex;
      align-items: center;

      img {
        height: auto;
        max-height: 100%;
      }
    }

    .mediaContent {
      h4 {
        @include h4;
        margin-bottom: 1rem;
      }

      p {
        @include p1;
      }

      &.hasLogo {
        &.hasDescription {
          height: 5.375rem;
        }

        &.noDescription {
          height: unset;
        }

        h4 {
          @include multi-line-ellipsis(2);
          height: 4.375rem;
          margin-bottom: 0;
        }

        p {
          @include multi-line-ellipsis(5);
          color: rgba($black, 0.6);

          position: absolute;
          top: 2rem;
          bottom: 2rem;
          left: 2rem;
          right: 2rem;
          pointer-events: none;

          background-color: $white;
          border-radius: 0.625rem;
          opacity: 0;
          transition: 0.2s opacity linear;

          &:hover {
            opacity: 1;
          }

          @media screen and (max-width: $mobile) {
            @include multi-line-ellipsis(5);
          }
        }
      }

      &.noLogo {
        h4 {
          @include multi-line-ellipsis(1);
        }

        p {
          @include multi-line-ellipsis(3);
          height: 5.25rem;
        }
      }
    }
  }
}