// ============================================================================
// :: Highlight box
// ============================================================================
/**
 * A component that can contain anything. But it will highlight the content
 * within by placing it more in focus using a border for example.
 */

// ===============================================================================
// :: Root
// ===============================================================================
.m-highlight-box {
  padding: 2rem;

  @include respond-at($breakpoint-tablet-default) {
    padding: 3rem;
  }

  border: $border-width-base solid $primary-color-base;
  border-radius: $border-radius-1x-large;
}