/* Layout & Utility Classes for Qubic3D site */

/* Fluid container */
.container {
  width: 90%;
  max-width: 87.5rem;
  /* 1400px */
  margin-inline: auto;
}

/* Flexbox helpers */
.flex {
  display: flex
}

.flex-col {
  flex-direction: column
}

.ai-center {
  align-items: center
}

.ai-start {
  align-items: flex-start
}

.ai-end {
  align-items: flex-end
}

.jc-center {
  justify-content: center
}

.jc-between {
  justify-content: space-between
}

.jc-start {
  justify-content: flex-start
}

.jc-end {
  justify-content: flex-end
}

.gap-1 {
  gap: calc(var(--grid)*1)
}

.gap-2 {
  gap: calc(var(--grid)*2)
}

.gap-4 {
  gap: calc(var(--grid)*4)
}

/* Grid helpers */
.grid {
  display: grid
}

.grid-center {
  place-items: center
}

.cols-2 {
  grid-template-columns: repeat(2, 1fr)
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

.cols-4 {
  grid-template-columns: repeat(4, 1fr)
}

/* Responsive overrides */
@media(max-width:48rem) {
  .mobile-cols-1 {
    grid-template-columns: 1fr
  }

  .mobile-flex-col {
    flex-direction: column
  }
}

html,
body {
  height: 100%;
  min-height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}