/* How it works page: Video and Icon Columns blocks. */
@layer page {
  /* Video block: 4:3 embed centered in the column. */
  .video-embed {
    width: 790px;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }

  .video-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Icon columns */
  .icon-columns .acf-innerblocks-container {
    display: flex;
    gap: 20px;
    padding: 89px 0 134px;
  }

  .icon-column {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  /* Squarespace's summary carousel zooms the thumbnails ~27% and crops the
     transparent margins; reproduce that so the icons sit at the same size. */
  .icon-column .icon-image {
    aspect-ratio: 1654 / 1324;
    overflow: hidden;
  }

  .icon-column .icon-image img {
    display: block;
    width: 127%;
    height: auto;
    margin: -9.5% 0 0 -13.5%;
  }

  .icon-column .icon-body {
    padding-top: 17px;
  }

  .icon-column .icon-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
  }

  .icon-column .icon-text {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
  }

  /* 800px and narrower: stack the columns, lay each one out horizontally
     with the icon on the left and the text on the right. */
  @media (max-width: 800px) {
    .icon-columns .acf-innerblocks-container {
      flex-direction: column;
      gap: 40px;
      padding: 60px 0;
    }

    .icon-column {
      display: flex;
      align-items: center;
      gap: 24px;
      text-align: left;
    }

    .icon-column .icon-image {
      flex: 0 0 140px;
    }

    .icon-column .icon-body {
      flex: 1 1 0;
      min-width: 0;
      padding-top: 0;
    }

    .icon-column .icon-text {
      margin-bottom: 0;
    }
  }
}