/**
 * @file
 * Spacer — vertical spacing between Canvas sections.
 */

.layout-container {

  .spacer {
    display: block;
    width: 100%;
  }

  .spacer--small {
    height: var(--spacing-sm, 1rem);
  }

  .spacer--medium {
    height: var(--spacing-md, 2rem);
  }

  .spacer--large {
    height: var(--spacing-lg, 3rem);
  }

  .spacer--xl {
    height: var(--spacing-xl, 4rem);
  }

  .spacer--custom {
    height: var(--spacer-height);
  }

  @media (max-width: 768px) {
    .spacer--small {
      height: var(--spacing-xs, 0.75rem);
    }

    .spacer--medium {
      height: var(--spacing-sm, 1rem);
    }

    .spacer--large {
      height: var(--spacing-md, 2rem);
    }

    .spacer--xl {
      height: var(--spacing-lg, 3rem);
    }

    .spacer--custom {
      height: var(--spacer-height-mobile, var(--spacer-height));
    }
  }

}