@theme {
  /** Break-out variables
   * These are used for the break-out plugin and the responsive utilities.
   * The break-out variables are set to match the default plugin settings.
   * You can override them if you need to adjust for a particular use case.
   */
  --twcb-scrollbar-width: 0px;
}

@utility mx-break-out {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: calc(100vw - var(--twcb-scrollbar-width));
}

@utility ml-break-out {
  margin-left: calc(50% - 50vw);
  width: 100%;
}

@utility mr-break-out {
  margin-left: calc(-50% + 50vw);
  width: 100%;
}