components/footer/group.module.scss
div.group {
display: block;
&:not(:last-of-type) {
margin-right: 24px;
}
input {
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
appearance: none;
white-space: nowrap;
word-wrap: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h3 {
font-weight: 400;
font-size: 0.875rem;
margin: 12px 0;
}
@media (max-width: 960px) {
margin-right: 0 !important;
border-bottom: 1px solid var(--accents-2);
ul {
padding-left: 12px;
padding-bottom: 12px;
display: none;
}
input:checked ~ ul {
display: block;
}
h3 {
cursor: pointer;
}
h3::after {
content: '+';
float: right;
transition: transform 0.15s ease;
}
input:checked ~ label h3::after {
transform: rotate(45deg);
}
}
}