.media-card {
  container-type: inline-size;
  container-name: media-card;
  --img-width: 300px;
  --content-width: calc(100% - var(--img-width));
  padding-bottom: 32px;
}

.media-img {
  aspect-ratio: 4/3;
  max-width: 100%;
  width: 100%;
  object-fit: cover;

}

.media-card .media-content .media-img {
  width: var(--img-width);
  height: 100%;
  float: left;
  margin-bottom: 0rem;
}

.media-card .media-content > :not(img) {
  width: var(--content-width);
  padding-left: 32px;
}

.media-card .media-content > :not(img), .media-card > a {
  height: auto;
  float: right;
}

.media-card > a {
  margin-top: 16px;
  color: white;
  padding: .75rem;
  text-decoration: none;
  transition: all .2s;
}

.media-card > a:hover {
  color: black;
  background-color: white;
}

.media-card .media-content .media-container {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-img {
  margin-bottom: 2rem;
}

@container media-card (max-width: 500px) {
  .media-card .media-content {
    --img-width: 100%;
    --content-width: 100%;
  }

  .media-card .media-content > :not(img), .media-card > a {
    padding-left: 0px;
  }
}