/* Mobile-only artwork for the recommendation cards.
   Replacement assets: 750 x 900 px (5:6), JPG. */
@media screen and (max-width: 768px) {
  #pcat-decouvrir.mobile-artwork-cards,
  #actifs-decouvrir.mobile-artwork-cards {
    padding-left: 24px;
    padding-right: 24px;
  }

  #pcat-decouvrir.mobile-artwork-cards .col-left .card,
  #pcat-decouvrir.mobile-artwork-cards .col-right .card,
  #actifs-decouvrir.mobile-artwork-cards .col-left .card,
  #actifs-decouvrir.mobile-artwork-cards .col-right .card {
    aspect-ratio: 5 / 6;
    min-height: 360px;
    padding: 28px 24px 30px;
    align-items: flex-start;
    justify-content: space-between;
    background-image: var(--mobile-card-background) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #pcat-decouvrir.mobile-artwork-cards .card h2,
  #actifs-decouvrir.mobile-artwork-cards .card h2 {
    max-width: 220px;
    padding: 0;
  }

  #pcat-decouvrir.mobile-artwork-cards .card a,
  #actifs-decouvrir.mobile-artwork-cards .card a {
    position: absolute;
    top: 50%;
    left: 24px;
    margin: 0;
    transform: translateY(-50%);
    background-color: transparent;
  }

  #pcat-decouvrir.mobile-artwork-cards .card .mobile-card-img,
  #pcat-decouvrir.mobile-artwork-cards .card .mobile-card-img-deco,
  #actifs-decouvrir.mobile-artwork-cards .card .mobile-card-img,
  #actifs-decouvrir.mobile-artwork-cards .card .mobile-card-img-deco {
    display: none;
  }
}