/*
 * Esplora / Catalogo: unico owner della cover delle attività.
 * Il selettore è volutamente circoscritto a #results per non toccare gallery,
 * schede dettaglio, blog, mappa o altri .media-placeholder del sito.
 */
html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #eef2f5 !important;
}

html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder > a {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #eef2f5 !important;
}

html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder > a > img,
html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #eef2f5 !important;
}

/*
 * Alcuni layer legacy usavano >div:nth-child(2) e finivano per dare padding
 * alla cover perché il cuore è il primo figlio della card. Qui azzeriamo quel
 * side effect e assegniamo il padding al vero blocco testuale, cioè il div
 * immediatamente successivo alla cover.
 */
html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder + div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 11px 13px 14px !important;
}

@media(max-width:720px){
  html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  html body[data-page="catalog"] #main-content #results.result-list > article.activity-item > .media-placeholder + div {
    padding: 8px !important;
  }
}