/* Grid - Bootstrap Compatible */
.float-start, .float-left {
  float: left;
}
.float-end, .float-right {
  float: right;
}

/* Workaround as inline-start and inline-end are not yet supported by browsers */
html[dir="rtl"] {
  .float-start {
    float: right;
  }
  .float-end {
    float: left;
  }
}

.twelve-eighty {
  min-width: 320px;
  max-width: 1280px;
  margin: 0 auto;
}

.fourteen-forty {
  min-width: 320px;
  max-width: 1440px;
  margin: 0 auto;
}

.container {
  width: 100%;
  padding: 0 .5rem;
  @media (min-width: @media-breakpoint-sm) {
    padding: 0 .75rem;
  }
  @media (min-width: @media-breakpoint-md) {
    padding: 0 1rem;
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--gutter-y) var(--gutter-x);
  margin-bottom: var(--gutter-y);
  &.layout {
    grid-gap: var(--gutter-x);
  }
  &.column {
    flex-direction: column;
  }
  &.nowrap {
    grid-auto-flow: column;
  }
  &.center {
    justify-items: center;
    align-items: center;
  }
  [class*="col-"] {
    grid-column: span 12;
  }
}

.make-grid-columns(@device: ~'') {
  .col-@{device}-1 { grid-column: span 1 !important; }
  .col-@{device}-2 { grid-column: span 2 !important; }
  .col-@{device}-3 { grid-column: span 3 !important; }
  .col-@{device}-4 { grid-column: span 4 !important; }
  .col-@{device}-5 { grid-column: span 5 !important; }
  .col-@{device}-6 { grid-column: span 6 !important; }
  .col-@{device}-7 { grid-column: span 7 !important; }
  .col-@{device}-8 { grid-column: span 8 !important; }
  .col-@{device}-9 { grid-column: span 9 !important; }
  .col-@{device}-10 { grid-column: span 10 !important; }
  .col-@{device}-11 { grid-column: span 11 !important; }
  .col-@{device}-12 { grid-column: span 12 !important; }
}

// Backwards compatibility (col-xs-)
.make-grid-columns(xs);

@media (min-width: @media-breakpoint-sm) {
  .make-grid-columns(sm);
}

@media (min-width: @media-breakpoint-md) {
  .make-grid-columns(md);
}

@media (min-width: @media-breakpoint-lg) {
  .make-grid-columns(lg);
}

@media (min-width: @media-breakpoint-xl) {
  .make-grid-columns(xl);
}

@media (min-width: @media-breakpoint-xxl) {
  .make-grid-columns(xxl);
}

// Hidden

@media (max-width: (@media-breakpoint-sm - 1px)) {
  .hidden-xs { display: none !important; }
}
@media (min-width: (@media-breakpoint-sm)) and (max-width: (@media-breakpoint-md - 1px)) {
  .hidden-sm { display: none !important; }
}
@media (min-width: @media-breakpoint-md) and (max-width: (@media-breakpoint-lg - 1px)) {
  .hidden-md { display: none !important; }
}
@media (min-width: @media-breakpoint-lg) {
  .hidden-lg { display: none !important; }
}

@media print {
  .hidden-print {
    display: none !important;
  }
}
