figure {
    display: grid;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
  }
  figure > * {
    grid-area: 1/1;
    transition: .4s;
  }
  figure figcaption {
    /* display: grid; */
    align-items: end;
    /* font-family: sans-serif; */
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    padding: .5rem;
    background: var(--c,#0009);

    clip-path: inset(0 var(--_i,100%) 0 0);

    -webkit-mask:linear-gradient(#fff 0 0), linear-gradient(#fff 0 1);
    mask: linear-gradient(#fff 0 0), linear-gradient(#fff 0 1);

    -webkit-mask-composite: xor;
    mask-composite: xor;

    -webkit-mask-clip: text, padding-box;
    mask-clip: text, padding-box;

    margin: -1px;
  }

  figure:hover figcaption{
    --_i: 0%;
  }
  figure:hover img {
    transform: scale(1.2);
  }
  @supports not (-webkit-mask-clip: text) {
    figure figcaption {
     -webkit-mask: none;
     color: #fff;
    }
  }

  figcaption p{
    font-size: .9rem;
    padding-top: 1.2rem;
    text-align: justify;
  }
  /* body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    background: #425a52;
  } */