/* Fix the Desktop View and Mobile View section on smaller screens */
@media (max-width: 764px) {
  #block-ffddc62db305dba9568b4089a16e195f-super {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Make both columns use the full available width */
  #block-ffddc62db305dba9568b4089a16e195f-super > .notion-column {
    width: 100% !important;
    margin-inline-start: 0 !important;
  }

  /* Preserve the original Notion order */
  #block-a0cc739512a2d1b1281279dfa75b710a-super {
    order: 1;
  }

  #block-d2b854251a5138b39c47f2d19ed5700e-super {
    order: 2;
  }

  /* Remove empty blocks that create additional vertical spacing */
  #block-ffddc62db305dba9568b4089a16e195f-super
    > .notion-column
    > .notion-text:empty {
    display: none !important;
  }

  /* Make the desktop video responsive */
  #block-a0cc739512a2d1b1281279dfa75b710a-super
    .notion-embed__content,
  #block-a0cc739512a2d1b1281279dfa75b710a-super
    .notion-embed__container__wrapper,
  #block-a0cc739512a2d1b1281279dfa75b710a-super
    .notion-embed__container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Center the mobile demonstration without stretching the GIF */
  #block-d2b854251a5138b39c47f2d19ed5700e-super .notion-image {
    width: 100% !important;
    margin: 0 !important;
  }

  #block-d2b854251a5138b39c47f2d19ed5700e-super img {
    display: block !important;
    width: 240px !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto !important;
  }


  /* Center captions for both Desktop View and Mobile View */
@media (max-width: 764px) {
  .notion-column-list .notion-embed,
  .notion-column-list .notion-image {
    width: 100% !important;
  }

  .notion-column-list .notion-caption {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
}