@layer modules {
  @keyframes integrationsLogoScroller {
    from { translate: calc(50.6667rem - 100%) 0; }
    to { translate: 0 0; }
  }

  #integrations {
    background: linear-gradient(#EBF0F7 70%, #FFFEFC 85%, white);
    header {
      text-align: center;
      h2 {
        margin: 1rem 0;
        font-size: clamp(1.8rem, 3.75vw + .675rem, 3rem);
      }
      p {
        max-width: 40rem;
        font-size: 1.1rem;
        margin: 1rem auto;
      }
      a {
        display: inline-block;
        padding: .8rem 1.5rem;
        margin: 2rem auto 1rem;
        color: white;
        background-color: #12324B;
        font-weight: 600;
        border-radius: .4rem;
        text-decoration: none;
        transition: opacity .2s;
        &:hover { opacity: .8; }
      }
    }
    &.illustrated {
      background: center / cover no-repeat url("/-/modules/integrations/illustration.svg?v=yAl8faF+hB"),
        #DAEBFF;
      max-width: 1200px;
      padding: 5rem 2rem 3rem;
      margin: 4rem auto;
      box-sizing: border-box;
      border-radius: clamp(0rem, 30vw - 22.5rem, 2rem);
      h2 {
        max-width: 50rem;
        margin-inline: auto;
      }
      a {
        background-color: black;
        margin-top: 1rem;
      }
    }
  }

  #integrations-scroller {
    display: grid;
    grid: 9rem / 1fr auto 1fr;
    gap: 1rem;
    padding: 4rem 0;
    text-align: center;
    .middle {
      place-self: center;
      display: inline-block;
      padding: 1.6rem;
      background-color: white;
      border-radius: 1.5rem;
      box-shadow: 0 .2rem 2rem rgb(0 0 0 / 15%);
    }
    .scroller {
      --speed: calc(var(--amount) * 3s);
      display: grid;
      grid: auto auto / auto-flow dense auto;
      gap: 1rem;
      position: relative;
      overflow: clip;
      mask: linear-gradient(90deg, #0000, #000 100px calc(100% - 100px), #0000);
      &.left { --amount: 18; }
      &.right { --amount: 15; }
      img {
        width: auto;
        height: 4rem;
        position: absolute;
        animation: integrationsLogoScroller var(--speed) linear infinite;
        &:nth-child(1){ top: 0; }
        &:nth-child(2){ top: 5rem; }
      }
    }
    .scroller.left img:nth-child(2){ animation-delay: calc(var(--speed) * -.52); }
    .scroller.right img:nth-child(2){ animation-delay: calc(var(--speed) * -.52); }
    .chartmogul-logo {
      padding: 1rem;
      background: linear-gradient(150deg, #2A76B1, #142B62 70%);
      border-radius: .8rem;
      img {
        display: block;
        width: 3rem;
        height: 3rem;
      }
    }
    .icon {
      display: block;
      width: 2.4rem;
      height: 2.4rem;
      padding: .8rem;
      background: white;
      border-radius: .5rem;
    }
    @media (width < 700px){
      .middle { padding: 1.2rem; }
      .chartmogul-logo { padding: 0.8rem; }
      .chartmogul-logo img { width: 2rem; height: 2rem; }
    }
  }
}