#division{
margin-top: 80px;
}
#division .buttons {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 25px;
}
#division .filter {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 25px;
}
#division .filter .button,
#division .buttons .badge {
padding: 5px 8px;
margin: 8px;
background: #ffffff;
border-radius: 5px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
#division .filter .button {
border: 1px solid currentColor;
margin: 0;
text-align: center;
cursor: pointer;
}
#division .filter .button.kindergarten,
#division .buttons .kindergarten .badge {
color: rgba(var(--color-kindergarten))
}
#division .filter .button.kindergarten.active {
background: rgba(var(--color-kindergarten));
border: 1px solid rgba(var(--color-kindergarten));
color: #ffffff;
}
#division .filter .button.primary-school,
#division .buttons .primary-school .badge {
color: rgba(var(--color-primary-school))
}
#division .filter .button.primary-school.active {
background: rgba(var(--color-primary-school));
border: 1px solid rgba(var(--color-primary-school));
color: #ffffff;
}
#division .filter .button.secondary-school-I,
#division .buttons .secondary-school-I .badge {
color: rgba(var(--color-secondary-school-I))
}
#division .filter .button.secondary-school-I.active {
background: rgba(var(--color-secondary-school-I));
border: 1px solid rgba(var(--color-secondary-school-I));
color: #ffffff;
}
#division .filter .button.secondary-school-II,
#division .buttons .secondary-school-II .badge {
color: rgba(var(--color-secondary-school-II))
}
#division .filter .button.secondary-school-II.active {
background: rgba(var(--color-secondary-school-II));
border: 1px solid rgba(var(--color-secondary-school-II));
color: #ffffff;
}
#division .filter .button.university,
#division .buttons .university .badge {
color: rgba(var(--color-university))
}
#division .filter .button.university.active {
background: rgba(var(--color-university));
border: 1px solid rgba(var(--color-university));
color: #ffffff;
}

@media (max-width: 1000px) {
#division .buttons {
grid-template-columns: 1fr 1fr;
gap: 15px;
}
#division .filter {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media (max-width: 768px) {
#division .buttons {
grid-template-columns: 1fr;
gap: 20px;
}
#division .filter {
grid-template-columns: 1fr;
}
#formazione .w-50 {
width: 100%;
}   
}