/* Media Card Component */
.v-media-card {
  --v-media-card-shade: 0 1px 2px 0 #B3B3B3;
  --v-media-card-shade-hover: 0 1px 2px #B3B3B3, 0 4px 13px #B3B3B3;

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--v-media-card-shade);
  background: var(--color-white);
  transition: box-shadow 0.3s var(--ease);
}

.v-media-card:hover {
  box-shadow: var(--v-media-card-shade-hover);
}

.v-media-card--podcast .v-media-card__image::before,
.v-media-card--video .v-media-card__image::before {
  position: absolute;
  inset: auto 0 0 auto;
  width: 6.7rem;
  height: 4.9rem;
}

.v-media-card--podcast {
  .v-media-card__image::before {
    content: url("../../images/podcast.svg");
  }

  .v-button svg {
    transform: translateX(0);
    width: 1.5rem;
    height: 1.5rem;
  }
}

.v-media-card--video .v-media-card__image::before {
  content: url("../../images/video.svg");
}

.v-media-card__image {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 17.5rem;
  overflow: hidden;

  > div {
    height: 100%;
  }
}

.v-media-card__image img {
  width: 100%;
  height: 17.5rem;
  object-fit: cover;
  display: block;
}

.v-media-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.v-media-card__date {
  font-size: 1.6rem;
  font-weight: 500;
}

.v-media-card__title {
  color: #0066cc !important;
  margin: 0 !important;
}

.v-media-card__description {
  font-size: 1.6rem;
}

.v-button {
  margin-top: auto;

  svg {
    width: 2.4rem;
    height: 2.4rem;
  }
}

.v-button::before {
  content: '';
  position: absolute;
  inset: 0;
}