No notes defined.
<div class="linkGroups">
<div class="linkGroups__group">
<div class="linkGroups__heading">Maine</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Seacoast</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Parks</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Activities</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">Massachusetts</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Boston</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Cambridge</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Lowell</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Salem</a></li>
</ul>
</div>
<div class="linkGroups__group">
<div class="linkGroups__heading">New Hampshire</div>
<ul class="linkGroups__list">
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Towns</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Parks</a></li>
<li class="linkGroups__item"><a class="linkGroups__link" href="#">Activities</a></li>
</ul>
</div>
</div>
@use "/resources/styles/common" as *;
@use "/resources/styles/config";
.linkGroups {
$b: &;
display: grid;
gap: config.$padding;
//grid-auto-columns: 1fr;
grid-auto-flow: column;
width: max-content;
grid-template-columns: auto;
.linkGroups__callout {
img {
height: 100%;
}
}
.linkGroups__group {
padding: config.$padding;
#{$b}__heading {
font-weight: bold;
padding: config.$thin-v-space 0;
}
#{$b}__list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
&.-wide {
columns: 2;
column-gap: config.$h-space;
.linkGroup__link {
break-inside: avoid;
}
}
&.-secondary {
margin-bottom: 2rem;
}
}
#{$b}__item {
margin-bottom: 0;
}
#{$b}__link {
display: block;
padding: config.$thin-v-space 0;
}
}
}