50 lines
747 B
SCSS
50 lines
747 B
SCSS
.personnel {
|
|
|
|
.filters {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1em;
|
|
margin-bottom: 5em;
|
|
|
|
.button {
|
|
padding: .5em 1.5em;
|
|
font-weight: bold;
|
|
border: 2px solid #ccc;
|
|
border-radius: .5em;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
transition: border-color .2s ease-out;
|
|
|
|
&:hover, &.active {
|
|
border-color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.person {
|
|
text-align: center;
|
|
transition: opacity .5s ease-out;
|
|
|
|
img {
|
|
border-radius: 1em;
|
|
margin-bottom: 1em;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.hidden {
|
|
opacity: .3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $width-mobile) {
|
|
.personnel .grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1em;
|
|
}
|
|
}
|