<div class="artist-card">
  <h2 class="artist-card__title">St. Vincent</h2>
  <img class="artist-card__img" src="https://private-user-images.githubusercontent.com/16426195/353597191-6439c3fd-364c-470e-b794-f7a3da6a39aa.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIzNjk1NzQsIm5iZiI6MTcyMjM2OTI3NCwicGF0aCI6Ii8xNjQyNjE5NS8zNTM1OTcxOTEtNjQzOWMzZmQtMzY0Yy00NzBlLWI3OTQtZjdhM2RhNmEzOWFhLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzMwVDE5NTQzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVkOWY3Y2FjMDllMDc1ZDdjNWYyMTYxYmYzMjA0N2M1ZWIyM2QyMDhjNjQ1MzBhNTcxZTAxMzU5ZThhY2E5NTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OqL7osL2y7q7IoxN__DTROEgh6R3sDodOoJAMEyVr60" alt="St. Vincent">
</div>

:root {
  --primary: #d1fefc;
  --secondary: #ffe1e1;
  --accent: #ffeb37;
}

.artist-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1rem auto;
  max-width: 40rem;
  margin: auto;
  position: relative;
  box-shadow: 0.75rem -0.5rem 0 var(--accent), 0 -0.5rem 0 var(--primary),
    -0.8rem -1rem 0 var(--secondary);
}

.artist-card__title {
  margin: 0;
  grid-column: 1 / 5;
  grid-row: 2 / span 1;
  align-self: center;
  padding: 0.25em;
  position: relative;
  z-index: 1;
  font-size: 9vmin;
  text-align: center;
  font-family: "Major Mono Display", monospace;
  text-transform: uppercase;
}

.artist-card__img {
  max-width: 100%;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  align-self: center;
}

@supports (clip-path: circle(25%)) {
  .artist-card {
    clip-path: circle(0%);
    animation: circle-grow 2000ms 450ms forwards;

    &:hover .artist-card__img {
      clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
    }
  }

  .artist-card__img {
    clip-path: polygon(
      18.11% 16.5%,
      50% 0%,
      75% 50%,
      54.09% 90.44%,
      13.7% 63.94%
    );
    transition: clip-path 400ms ease-in-out;
  }

  .artist-card__title {
    clip-path: inset(50% 50%);
    animation: heading-in 400ms 1000ms forwards;
  }
}

@keyframes circle-grow {
  to {
    clip-path: circle(100%);
  }
}

@keyframes heading-in {
  to {
    clip-path: inset(0% 0%);
  }
}

@supports (mix-blend-mode: darken) {
  .artist-card {
    background-image: linear-gradient(
        to top right,
        var(--primary) 25%,
        transparent
      ),
      radial-gradient(
        circle at bottom right,
        transparent 15%,
        var(--secondary) 15%,
        var(--secondary) 20%,
        transparent 20%,
        transparent 22%,
        var(--secondary) 22%,
        transparent 30%
      );

    &::after {
      content: "";
      grid-column: 4 / 5;
      grid-row: 1 / 2;
      background: linear-gradient(
        to bottom left,
        var(--accent) 40%,
        transparent
      );
      mix-blend-mode: multiply;
      clip-path: circle(19%);
      transition: clip-path 400ms ease-in-out;
    }

    &:hover::after {
      clip-path: circle(100%);
    }
  }

  .artist-card__img {
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.5) brightness(0.9);
  }
}

@supports (-webkit-text-stroke: 1px black) {
  .artist-card__title {
    -webkit-text-stroke: 0.035em #001;
    color: transparent;
    text-shadow: 0.075em 0.075em var(--secondary);
  }
}

@media screen and (min-width: 25rem) {
  .artist-card__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 60%;
    clip-path: circle(3% at 95%);
    background-image: linear-gradient(
      150deg,
      var(--primary) 30%,
      var(--secondary) 50%,
      var(--accent)
    );
    z-index: -1;
    transition: clip-path 400ms ease-in-out;

    .artist-card:hover & {
      clip-path: circle(100%);
    }
  }
}

/* page layout */

body {
  margin: 0;
  padding: 0 1.5rem;
  height: 100vh;
  display: flex;
}