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

.mediaCard {
  padding-top: 1rem;
  padding-bottom: 1rem;
  &:global(.media) {
    margin: 0 0 1.75rem;
    border-radius: 0.625rem;
    border: 0.0625rem solid transparent;
    transition: all 0.2s linear;

    &:hover {
      border: 0.0625rem solid rgba($black, 0.15);
      box-shadow: $shadow-long;
    }
  }

  .mediaLeft {
    margin: 0 0 1rem 0;
    height: 2.5rem;
    img {
      height: auto;
      max-height: 100%;
    }
  }

  .mediaContent {
    h4 {
      @include h4;
      margin-bottom: 1rem;
      &:hover {
        color: $black;
      }
    }

    p {
      @include p1;
      @include multi-line-ellipsis(4);
      opacity: 0.8;
    }
  }
}