.cards {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.cards article {
  grid-column: span 3;
  min-width: 0;
}

.cards article:nth-child(5) {
  grid-column: 2 / span 3;
}

.artist-profile {
  display: block;
}

.artist-profile .portrait {
  overflow: hidden;
  transition: filter .35s ease, transform .35s ease;
  filter: grayscale(100%) sepia(10%) saturate(65%) contrast(1.04) brightness(.88);
}

.artist-profile:hover .portrait,
.artist-profile:focus-visible .portrait {
  filter: grayscale(65%) sepia(8%) saturate(78%) contrast(1.06) brightness(.92);
}

.artist-profile:hover h3 span,
.artist-profile:focus-visible h3 span {
  transform: translateX(4px);
}

.cards h3 span {
  transition: transform .25s ease;
}

.p1 { background-image: url('assets/artist-gaby.jpeg') !important; background-position: 50% 26% !important; }
.p2 { background-image: url('assets/artist-marie.jpeg') !important; background-position: 50% 35% !important; }
.p3 { background-image: url('assets/artist-meep.jpeg') !important; background-position: 50% 48% !important; }
.p4 { background-image: url('assets/artist-deathbydragon.jpeg') !important; background-position: 50% 44% !important; }
.p5 { background-image: url('assets/artist-vino.jpeg') !important; background-position: 50% 28% !important; }
.p6 { background-image: url('assets/artist-pepitepulco.jpeg') !important; background-position: 50% 28% !important; }
.p7 { background-image: url('assets/artist-sixtine-v2.png') !important; background-position: 50% 44% !important; }

@media (max-width: 850px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards article,
  .cards article:nth-child(5) { grid-column: auto; }
}

@media (max-width: 520px) {
  .cards { gap: 22px 10px; }
  .cards h3 { font-size: 11px; }
}