.module-photo-grid {
    --item-gap: calc(44 * var(--base-unit));
    --margin: calc(44 * var(--base-unit));
  }
  
  .module-photo-grid .module-wrap {
    max-width: none;
    margin: 0 auto;
  }

  .photo-grid-row {
    --columns: 2;
    --item-width: calc((100% - 1px - var(--item-gap)) / var(--columns));
    margin-right: calc(var(--item-gap) * -1);
    margin-bottom: calc(var(--margin) * -1);
    display: flex;
    flex-flow: row nowrap;
  }
  
  .photo-grid-row[data-columns="1"] {
    --columns: 1;
  }
  
  .photo-grid-row > figure {
    width: var(--item-width);
    margin-right: var(--item-gap);
    margin-bottom: var(--margin);
    position: relative;
    overflow: hidden;
  }
  
  .photo-grid-row + .photo-grid-row {
    margin-top: var(--margin);
  }
  
  .photo-grid-row figure::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--base-color-black);
    --scale: 0;
    transform: scaleX(var(--scale));
    transform-origin: left center;
    transition: transform 1000ms var(--ttf-4);
    z-index: 1;
  }
  
  .photo-grid-row.is-on-screen figure::before {
    --scale: 1;
  }
  
  .photo-grid-row.is-on-screen-2 figure::before {
    --scale: 0;
    transform-origin: right center;
  }
  
  .photo-grid-row figure img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: 300ms var(--ttf-4);
    transition-property: opacity;
    transition-delay: 1000ms;
  }
  
  .photo-grid-row.is-on-screen figure img {
    opacity: 1;
    transform: none;
  }