/**
 * Layout utility styles
 */

/* Override bootstrap's container class*/
.container {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--responsive-padding);
  padding-right: var(--responsive-padding);
}

/* Override bootstrap's placeholder class */
.placeholder {
  background-color: transparent;
}

/* Basic grids, using CSS grid */

.grid {
  display: grid;
  gap: var(--gutter-standard);
}

@container main-canvas (min-width: 768px) {
  .grid--2col {
    grid-template-columns: repeat(2, 50%);
    grid-template-areas: 'first second';

    .layout__region--second {
      grid-area: second;
    }
  }

  .grid--2col--33-67 {
    grid-template-columns: 33% auto;
  }

  .grid--2col--67-33 {
    grid-template-columns: auto 33%;
  }

  .grid--2col--60-40 {
    grid-template-columns: auto 40%;
  }

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

/* Rounded corners */
.round-corners {
  border-radius: 1.5rem;
}