[data-component-id="ondine:team"] {
  /* @todo Add your styles here. */

  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: 1fr;

  .media--wrapper{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
    :is(img, picture){
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 200ms ease;
    }
  }

  .content--wrapper{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
    padding: 1rem;
    display: grid;
    align-content: end;
    text-shadow: 0 0 6px rgba(0,0,0,0.5);

    h3, .function, a{
      color : #fff;
    }
    .function{
      font-weight: 600;
    }
    a{
      font-weight: 400;

    }
  }

  &:hover{
    .media--wrapper :is(img, picture){
      filter: grayscale(0%);
    }
  }

}