.archive_filter {
max-width: 1620px;
margin: 0 auto var(--gap-m);
justify-content: center;
}
.archive_filter .filter_toggle {
color: var(--grey);
}
.archive_filter,
.archive_filter ul {
display: flex;
flex-wrap: wrap;
gap: var(--gap-s);
align-items: center;
}
.archive_filter ul {
list-style: none;
margin: 0;
}
.archive_filter ul li {
margin-bottom: 0;
}
.archive_filter ul span {
color: var(--color-coffee);
font-family: "Adamina", serif;
font-size: 15px;
font-weight: 400;
line-height: 110%;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
padding: var(--gap-xs);
position: relative;
}
.archive_filter ul span:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-coffee);
}
.archive_filter ul a {
color: var(--text);
text-decoration: none;
font-weight: 400;
padding: var(--gap-xs);
}
.archive_filter ul a:hover,
.archive_filter ul li.current a {
background: var(--color-white-smoke);
border-radius: var(--border-radius-s);
}
@media (max-width: 1024px) {
.archive_filter {
padding: 0 15px 2em;
}
.archive_filter,
.archive_filter ul {
flex-flow: column;
align-items: center;
gap: 10px;
}
.archive_filter ul {
height: 0;
opacity: 0;
transition: 0.1s;
}
.archive_filter ul.open {
height: max-content;
opacity: 1;
}
.archive_filter ul.open li:first-of-type {
display: none;
}
.archive_filter li {
width: 100%;
}
.archive_filter ul a {
display: block;
text-align: center;
}
.filter_toggle {
position: relative;
display: flex;
align-items: center;
gap: var(--gap-xs);
cursor: pointer;
}
.filter_toggle:after {
content: "";
display: block;
width: 10px;
height: 7px;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath fill='%23050046' d='m5 6.06-5-5L1.06 0 5 3.94 8.94 0 10 1.06l-5 5Z'/%3E%3C/svg%3E");
}
}