No notes defined.
<div class="linkGroup">
<div class="linkGroup__heading">Massachusetts</div>
<ul class="linkGroup__list">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
</ul>
</div>
<div class="linkGroup">
<div class="linkGroup__heading">Massachusetts</div>
<ul class="linkGroup__list -wide">
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
<li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
</ul>
</div>
.linkGroup {
&__heading {
font-weight: bold;
padding: $thin-v-space 0;
}
&__list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
&.-wide {
columns: 2;
column-gap: 1.5rem;
.linkGroup__link {
break-inside: avoid;
}
}
&.-secondary {
margin-bottom: 2rem;
}
}
&__item {
margin-bottom: 0;
}
&__link {
display: block;
padding: $thin-v-space 0;
}
}