.ui-buttons-container {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  row-gap: var(--crotchet);
  column-gap: var(--minim);

  & > p {
    margin: 0;
  }

  &.dark {
    background-color: var(--mb);

    & > p {
      color: var(--shw);
    }
  }
}

.ui-buttons-dark-container {
  background-color: var(--mb);
  padding: var(--minim) 0;

  & p,
  & h2{
    color: var(--shw);
  }
}

@media only screen and (min-width: 878px) {
  .ui-buttons-dark-container {
    border-radius: var(--quaver);
  }
}