body {
    font-family: "Inter", sans-serif;
    max-width: 55rem;
    padding: 2rem 1.5rem;
    margin: 0 auto;
    color: #241623;
    background: #eef2f4;
  }
  
  h1 {
    font-weight: 900;
    font-size: 2.7rem;
    max-width: 20ch;
    padding-left: 60px;
  }
  
  p {
    max-width: 60ch;
  }
  
  a {
    color: currentcolor;
  }
  
  
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--auto-grid-min-size, 14rem), 1fr)
    );
    grid-gap: var(--auto-grid-gap, 0);
    padding: 0;
  }
  
  .flow > * + * {
    margin-top: var(--flow-space, 1em);
  }
  
  .team {
    --flow-space: 2em;
  }
  

  .profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1/1;
    position: relative;
    padding: 1.5rem;
    color: #ffffff;
    backface-visibility: hidden;
    text-decoration: none;
    overflow: hidden;
  }
  
  .profile::before,
  .profile::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    /*inset: 0;*/
    top: 0;
    left: 0;
  }
  
  .profile::before {
    background: linear-gradient(
      to top,
      hsl(0 0% 0% / 0.79) 0%,
      hsl(0 0% 0% / 0.787) 7.8%,
      hsl(0 0% 0% / 0.779) 14.4%,
      hsl(0 0% 0% / 0.765) 20.2%,
      hsl(0 0% 0% / 0.744) 25.3%,
      hsl(0 0% 0% / 0.717) 29.9%,
      hsl(0 0% 0% / 0.683) 34.3%,
      hsl(0 0% 0% / 0.641) 38.7%,
      hsl(0 0% 0% / 0.592) 43.3%,
      hsl(0 0% 0% / 0.534) 48.4%,
      hsl(0 0% 0% / 0.468) 54.1%,
      hsl(0 0% 0% / 0.393) 60.6%,
      hsl(0 0% 0% / 0.31) 68.3%,
      hsl(0 0% 0% / 0.216) 77.3%,
      hsl(0 0% 0% / 0.113) 87.7%,
      hsl(0 0% 0% / 0) 100%
    );
    transition: 300ms opacity linear;
  }
  
  .profile::after {
    background: linear-gradient(
      45deg,
      hsl(5 97% 63% / 0.7) 0,
      hsl(5 97% 63% / 0) 100%
    );
    opacity: 0;
    transition: 300ms opacity linear;
  }
  
  .profile > * {
    z-index: 1;
  }
  
  .profile img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: -1;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 200ms ease, transform 250ms linear;
  }
  
  .profile h2,
  .profile p {
    transform: translateY(2ex);
  }
  
  .profile h2 {
    font-size: 1.7rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.03ch;
    transition: 300ms transform ease;
  }
  
  .profile p {
    font-size: 1.2rem;
    font-weight: 500;
  }
  
  .profile p {
    opacity: 0;
    transition: 300ms opacity linear, 300ms transform ease-in-out;
  }
  
  .profile:focus {
    outline: 0.5rem solid white;
    outline-offset: -0.5rem;
  }
  
  .profile:hover :is(h2, p),
  .profile:focus :is(h2, p) {
    transform: none;
  }
  
  .profile:hover::after,
  .profile:focus::after,
  .profile:hover::before,
  .profile:focus::before {
    opacity: 0.7;
  }
  
  .profile:hover p,
  .profile:focus p {
    opacity: 1;
    transition-delay: 200ms;
  }
  
  .profile:hover img,
  .profile:focus img {
    filter: grayscale(0);
    transform: scale(1.05) rotate(1deg);
  }