/* ITCSS: objects — layout primitives */
.o-wrap {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

.o-stack > * + * {
  margin-top: var(--space-md);
}

.o-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.o-grid-2 {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 800px) {
  .o-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .o-grid-2--aside {
    grid-template-columns: 1.4fr 0.8fr;
  }
}

.o-grid-3 {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 720px) {
  .o-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.o-split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 860px) {
  .o-split {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.o-section {
  padding: var(--space-2xl) 0;
}

.o-section--tint {
  background: var(--color-tint);
}

.o-section--navy {
  background: var(--color-navy);
  color: var(--color-porcelain);
}

.o-section--navy h2,
.o-section--navy h3 {
  color: var(--color-white);
}

.o-rule {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 0;
}