.d-grid-container {
  display: grid;
  grid-template-columns: [full-start] var(--sp-md) [center-start] minmax(0, 1fr) [center-end] var(--sp-md) [full-end];

  @media (min-width: 768px) {
    grid-template-columns: [full-start] 2rem [center-start] minmax(0, 1fr) [center-end] 2rem [full-end];
  }

  & > * {
    grid-column: full-start / full-end;
  }
}

.container {
  padding: var(--sp-md);
}

.col-2 {
  @media (min-width: 768px) {
    max-width: 100ch;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }
}

/* BIG STANDOUT PARAGRAPH */
.big-p {
  min-height: calc(100svh - var(--nav-height));
  padding: var(--sp-md);
  background: var(--color-primary);
  display: grid;
  align-content: center;

  @media (min-width: 768px) {
    margin-bottom: var(--sp-xl);
  }

  p {
    font-size: var(--fs-lg);
    color: var(--color-light);
    text-wrap-style: balance;

    @media (min-width: 768px) {
      font-size: var(--fs-xl);
      max-width: 50ch;
      margin: 0 auto;
    }

    a {
      display: inline;
      color: inherit;
    }

    span.fun {
      font-family: var(--font-fun);
    }
  }
}

/* BUTTONS */
.btn,
a.btn {
  justify-self: center;
  background: transparent;
  display: block;
  padding: 1rem .5rem;
  display: flex;
  justify-content: center;
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border .2s;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  min-width: 200px;

  a.btn--primary,
  &.btn--primary {
    background: var(--color-primary);
    color: var(--color-light);;

    &:hover {
      background: transparent;
      color: var(--color-primary);
      border: var(--border-primary);
    }
  }

  a.btn--light,
  &.btn--light {
    background: var(--color-light);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    
    &:hover {
      background: var(--color-primary);
      color: var(--color-light);
      border: var(--border-light);
    }
  }

  a.btn--dark,
  &.btn--dark {
    background: var(--color-dark);
    color: var(--color-light);

    &:hover {
      background: transparent;
      color: var(--color-dark);
      border: 1px solid var(--color-dark);
    }
  }

  &.btn--sm {
    padding: .5rem;
    min-width: 100px;
  }
}

/* OVERLAY */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-light);
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-family: var(--font-fun);
}