/* Basic grids */
.grid {
  display: grid;
  gap: 1rem;

  .block {
    margin-bottom: 2rem;
  }

  li {
    display: grid;
    height: 100%;
  }
}

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

/* Fix the width to the max-width and set margins to atuo */
.container {
  width: 100%;
  max-width: var(--max-width) !important; /* override bootstrap layouts */
  margin: 0 auto;
  padding-left: var(--responsive-padding);
  padding-right: var(--responsive-padding);

  /* override bootstrap layouts */
  .row > * {
    gap: var(--bs-gutter-x);
    padding-left: 0;
    padding-right: 0;
  }
}

.container-v-padding {
  margin-bottom: var(--vertical-padding);
  margin-top: var(--vertical-padding);
}

.fullwidth {
  max-width: 100%;
}

/* Darkened overlay */
.darkened-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* block pattern */
.block-pattern {
  background: url("../../assets/block-pattern.svg");
  --bg-color: var(--color-blue);
  --fg-color: var(--color-white);

  background-color: var(--bg-color);
  color: var(--fg-color);

  a {
    color: var(--color-white);
  }
}