.module-device-grid {
    --columns: 3;
    --item-width: calc((100% - 1px - (var(--item-gap) * (var(--columns) - 1))) / var(--columns));
    --item-gap: calc(96 * var(--base-unit));
    --margin: calc(96 * var(--base-unit));
  }

  .module-device-grid .module-wrap {
    max-width: calc(1062 * var(--base-unit));
    margin: 0 auto;
  }
  
  .device-grid {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: calc(var(--margin) * -1);
  }
  
  .device-grid > li {
    width: var(--item-width);
    margin-right: var(--item-gap);
    margin-bottom: var(--margin);
  }
  
  .device-grid > li:nth-child(3n+3) {
    margin-right: 0;
  }
  
  .device-grid figure {
    position: relative;
  }
  
  .device-grid figure svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    clip-path: inset(0% 100% 0% 0%);
    transition: 1000ms var(--ttf-4);
    transition-delay: calc(var(--index) * 100ms);
    transition-property: clip-path, opacity;
  }
  
  .device-grid figure svg path {
    fill: var(--base-color-black);
  }
  
  .device-grid .is-on-screen figure svg {
    clip-path: inset(0% 0% 0% 0%);
  }
  
  .device-grid .is-on-screen-2 figure svg {
    opacity: 0;
  }
  
  .device-grid figure img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: 850ms var(--ttf-2);
    transition-property: opacity, transform;
    transition-delay: calc(1000ms + (var(--index) * 100ms));
    transform: scale(1.03);
  }
  
  .device-grid .is-on-screen figure img {
    opacity: 1;
    transform: none;
  }