.sections {
  border-color: var(--color-border);
  display: flex;
  gap: var(--row-gap) var(--column-gap);

  @media (width < 64rem) {
    border-inline-start-width: 1px;
  }

  @media (width >= 64rem) {
    border-block-end-width: 1px;
  }
}

.section {
  border-color: transparent;

  @media (width < 64rem) {
    border-inline-start-width: var(--size-1);
    padding-block: var(--size-2);
    padding-inline-start: var(--size-2);
  }

  @media (width >= 64rem) {
    border-block-end-width: var(--size-1);
    padding-block-end: var(--size-2);
    padding-inline: var(--size-4);
  }
}

a.section {
  color: var(--color-text);
  text-decoration: none;
}

.section--selected,
.section:hover {
  border-color: var(--color-border-dark);
}