* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

body {
  display: grid;
  grid-row-gap: 20vh;
  row-gap: 20vh;
}

section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100vh;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  justify-items: stretch;
  place-items: stretch;
  grid-column-gap: 1px;
  -webkit-column-gap: 1px;
     -moz-column-gap: 1px;
          column-gap: 1px
}

section article, 
  section figure{
    padding: min(10vh, 48px);
  }

article{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

article div {
    width: min(32ch, 70%);
  }

article h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 1em;
    text-transform: capitalize;
  }

article p {
    font-size: 18px;
    line-height: 1.4;
  }

figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

figure > div{
    height: min(800px, 70vh);
    display: grid;
    grid-template-columns: repeat(3, minmax(-webkit-min-content, 1fr));
    grid-template-columns: repeat(3, minmax(min-content, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-gap: 20px;
    gap: 8px;
  }

figure .pic {
    overflow: hidden;
    border-radius: 32px;
    contain: content;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

figure .pic:last-child {
    grid-column: span 3;
    grid-row: span 2;
  }

figure .pic:first-child {
    grid-column: span 2;
  }

figure img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    width: 100%;
    height: 100%;
  }


@-webkit-keyframes reveal{
  from {
    translate: 0 50% 0;
    translate: 0 var(--translate, 50%) 0;
    opacity: 0;
    -webkit-clip-path: inset(50% 20% 50% 20% round 100%);
            clip-path: inset(50% 20% 50% 20% round 100%);
  }
  to{
    translate: 0 0 0;
    opacity: 1;
    -webkit-clip-path: inset(0% 0% 0% 0% round 32px);
            clip-path: inset(0% 0% 0% 0% round 32px);
  }
}


@keyframes reveal{
  from {
    translate: 0 50% 0;
    translate: 0 var(--translate, 50%) 0;
    opacity: 0;
    -webkit-clip-path: inset(50% 20% 50% 20% round 100%);
            clip-path: inset(50% 20% 50% 20% round 100%);
  }
  to{
    translate: 0 0 0;
    opacity: 1;
    -webkit-clip-path: inset(0% 0% 0% 0% round 32px);
            clip-path: inset(0% 0% 0% 0% round 32px);
  }
}


@supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
  .pic {
    -webkit-animation: reveal cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
            animation: reveal cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-timeline: view(block);
    animation-range: cover 20% cover 30%;
    animation-range: var(--start, cover 20%) var(--end, cover 30%);
  }
  
  
  .pic:first-child{
    --translate: -100%;
    --start: cover 15%;
  }
  
  .pic:last-child{
    --translate: -50%;
    --start: cover 10%;
  }
}