@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-text-cards-grid {
&__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 {
@include margin-bottom( rem-calc(24) );
color: var( --text-color );
}
p {
&:last-of-type {
margin-bottom: 0;
}
}
}
&__grid {
gap: rem-calc( 16 0 );
}
&__card {
display: flex;
flex-direction: column;
transition: 0.3s box-shadow var( --ease ), 0.3s opacity var( --ease ), 0.3s transform var( --ease );
&[data-aos^=fade][data-aos^=fade] {
transition: 0.3s box-shadow var( --ease ), 0.3s opacity var( --ease ), 0.3s transform var( --ease );
}
&:not(.no-link) {
&:hover {
box-shadow: 0 0 rem-calc(32) 0 rgba(3, 10, 50, 0.3);
}
}
&.no-link
&.no-link a {
cursor: default;
}
a {
text-decoration: none;
color: var(--text-color);
padding-top: rem-calc(15);
padding-bottom: rem-calc(10);
&[href='#'] {
pointer-events: none;
}
}
picture {
width: 100%;
display: flex;
flex-direction: column;
@include bp($lg) {
aspect-ratio: 410/230;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
p {
@include margin-top( rem-calc(12) );
font-weight: 700;
margin-bottom: 0;
}
}
}
Animation: