app/assets/stylesheets/budgets/groups_and_headings.scss
.public .groups-and-headings {
$spacing: $line-height * 0.5;
.headings-list {
@include flex-with-gap($spacing);
flex-wrap: wrap;
list-style: none;
}
.heading {
@include brand-color;
@include card;
border: 2px solid $border;
border-radius: rem-calc(6);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
margin-bottom: calc(#{$line-height} / 2);
margin-top: calc(#{$line-height} / 4);
padding: calc(#{$line-height} / 2);
width: 100%;
@include breakpoint(medium) {
width: calc(100% / 3 - #{$spacing});
}
@include breakpoint(large) {
width: calc(100% / 6 - #{$spacing});
}
a {
font-weight: bold;
&:hover::before {
background: $light;
z-index: -1;
}
}
span {
display: block;
font-size: $small-font-size;
padding-top: calc(#{$line-height} / 2);
}
}
}