// ============================================================================
// :: Resources
// ============================================================================
/**
 * A contextual component to correctly display the resources used in the
 * brandplatform. Mainly distributing them in a grid like fashion.
 */

// ============================================================================
// :: Settings
// ============================================================================
$item-spacing: 2rem;
$item-spacing-sides: $item-spacing * 2;

// ============================================================================
// :: Root
// ============================================================================
.bp-resources {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;

  @include respond-at($bp-breakpoint-tablet-base) {
    margin: -$item-spacing;
    width: calc(100% + #{$item-spacing-sides});
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-resources__item {
  width: 100%;

  &:not(:last-child) {
    margin-bottom: $item-spacing;
  }

  @include respond-at($bp-breakpoint-tablet-base) {
    margin: $item-spacing;
    width: calc(49.9% - #{$item-spacing-sides});
  }
}