/**
 * Layout for <picture> inside .coach-image / .post-image (card-media-image component).
 * Loaded after style.min.css so WebP sources render with correct cover sizing.
 */
.coach-image picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.coach-image picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.post-image picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.post-image picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@supports (aspect-ratio: 4/3) {
  .coach-image picture img {
    position: static;
    width: 100%;
    height: 100%;
  }
}

@supports (aspect-ratio: 16/10) {
  .post-image picture img {
    position: static;
    width: 100%;
    height: 100%;
  }
}

/* Coaching page: tiny-slider thumbnails expect li > img; with <picture> use same visuals */
.tns-thumbnail > picture {
  display: block;
  width: 100%;
}

.tns-thumbnail > picture img {
  display: block;
  width: 100%;
  -webkit-transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  opacity: 0.6;
}

.tns-thumbnail:hover > picture img {
  opacity: 1;
}

.tns-thumbnail.tns-nav-active > picture img {
  border-color: #e64658;
  opacity: 1;
}