$o-bricks-border-size: 3px;


.o-bricks {
  @include vspacing(
    'margin-top' 1,
    'margin-bottom' 1
  );

  display: flex;
  flex-direction: column;
}


.o-bricks__item {
  @include owl(space(3));
  @include font-size(l);
  @include font-weight(medium);
  padding: calc(#{space(3.5)} - #{$o-bricks-border-size}) space(6);
  text-decoration: none;
  color: palette(neutral, 700);
  background-color: palette(neutral, 0);
  border: $o-bricks-border-size solid transparent;
  transition: color 150ms linear,
              border 150ms linear;

  &[href]:hover {
    color: palette(neutral, 800);
    border-color: palette(neutral, 700);
    background-color: rgba(palette(neutral, 0), 0.7);
  }
}