.archive_filter {
	max-width: 1110px;
	margin: 0 auto 3rem;
	display: flex;
	gap: 20px;
	justify-content: center;
	.filter-toggle {
		color: var(--white);
		background: var(--primary);
		padding: 15px 20px;
		border-radius: var(--border-radius-l);
	}
	ul {
		display: flex;
		gap: 20px;
		list-style: none;
		margin: 0;
		li {
			margin-bottom: 0;
			&.current {
				a {
					background: var(--primary);
					color: var(--white);
				}
			}
		}
		a {
			display: block;
			color: var(--deep-grey);
			background: var(--light-grey);
			padding: 15px 20px;
			border-radius: var(--border-radius-l);
			font-weight: 600;
			text-decoration: none;
			transition: all 0.3s ease;
			&:hover {
				background: var(--tertiary);

			}
		}
	}
}

@media (width > 1024px) {
	.archive_filter {
		.filter-toggle {
			display: none;
		}
	}
}

@media (width <= 1024px) {
	.archive_filter {
		flex-flow: column;
		align-items: center;
		gap: 20px;
		margin: 0 0 2rem;
		.filter-toggle {
			position: relative;
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 16px;
			&: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='%23FFFFFF' d='m5 6.06-5-5L1.06 0 5 3.94 8.94 0 10 1.06l-5 5Z'/%3E%3C/svg%3E");
			}
		}
		ul {
			height: 0;
			opacity: 0;
			transition: 0.1s;
			align-items: center;
			gap: 10px;
			li {
				width: 100%;
			}
			a {
				display: block;
				font-size: 16px;
				text-align: center;
			}
		}
		&.open {
			ul {
				height: max-content;
				opacity: 1;
			}
		}
	}
}