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; */
  /* } */
  
   /* p {  */
     /* max-width: 60ch;  */
   /* }  */
  
  a {
    color: currentcolor;
  }

  p{
    color: white;
  }

  h2{
    color: #ffffff;
  }

  
  .auto-grid-mentors {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns:
     repeat( 
       auto-fill, 
       minmax(var(--auto-grid-min-size, 20rem), 1fr) 
     );
     margin-left: 20%;
     margin-right: 20%;
    
    grid-gap: var(--auto-grid-gap, 0);
    padding: 0;
    
  }
  /* Utilities */
  .auto-grid {
    display: grid;
    grid-template-columns:
     repeat( 
       auto-fill, 
       minmax(var(--auto-grid-min-size, 20rem), 1fr) 
     ); 
    grid-gap: var(--auto-grid-gap, 0);
    padding: 0;
  }


  
  .flow > * + * {
    margin-top: var(--flow-space, 1em);
  }
  
  /* Composition */
  .team {
    --flow-space: 10em; 
    margin: 10px;
  }
  
  /* Blocks */
  .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;
    margin: 10px;
  }
  
  .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 0% 0% / 0.7) 0,
      hsl(5 0% 0% / 0) 100%
    );
    /* opacity: 0; */
    transition: 300ms ;
  }
  
  .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: sepia(100%) hue-rotate(190deg) saturate(500%);  */
    filter: grayscale(50%) brightness(120%); 
    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.3;
  }
  
  .profile:hover p,
  .profile:focus p {
    opacity: 1;
    transition-delay: 200ms;
  }
  
  .profile:hover img,
  .profile:focus img {
    filter: grayscale(0);
    transform: scale(1.05);
  }