@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-vacancies-grid {
transition: 0.3s opacity var( --ease );
&.loading {
opacity: 0.5;
pointer-events: none;
}
.heading {
@include margin-bottom( rem-calc(48) );
}
&__meta {
display: flex;
flex-direction: row;
gap: rem-calc(16);
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
@include margin-bottom( rem-calc(60) );
.heading {
margin-bottom: 0;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: rfs-fluid-value( rem-calc(24 48) );
list-style-type: none;
li {
a {
display: block;
opacity: 0.3;
transition: 0.3s var(--ease);
transition-property: opacity;
color: $primary;
text-transform: uppercase;
text-decoration: none;
margin: 0;
&:hover,
&.active {
opacity: 1
}
}
}
}
}
&__grid {
@include padding-top( rem-calc(32) );
@include padding-bottom( rem-calc(32) );
}
.card-grid {
&__item {
padding: 0;
.post-card {
height: 100%;
}
}
}
}
Animation: