@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-featured-cards {
&__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;
}
.btn {
margin-right: 0;
}
}
&__small-cards {
margin-top: rem-calc(16);
@include bp($lg) {
margin-top: 0;
}
.row {
@include bp($lg) {
margin-right: 0;
margin-left: 0;
}
.col-12 {
@include bp($lg) {
padding-right: 0;
padding-left: 0;
}
}
}
}
}
class FeaturedCards {
/**
* @param {object} block
*/
constructor( block ) {
this.block = block;
ScrollTrigger.create({
trigger: this.block,
start: 'top bottom',
end: 'bottom top',
onEnter: () => this.init(),
});
}
init() {
this.bigCardPicture = this.block.querySelector( '.block-featured-cards__big-card .post-card picture' );
this.smallCardsRow = this.block.querySelector( '.block-featured-cards__small-cards .row' );
const resizeHandler = debounce( () => {
if ( window.innerWidth > 992 ) {
this.setHeight();
} else {
this.bigCardPicture.style.removeProperty('height');
}
}, 500);
window.addEventListener('resize', resizeHandler);
if ( window.innerWidth > 992 ) {
this.setHeight();
}
}
setHeight() {
let height = this.smallCardsRow.clientHeight - 24;
this.bigCardPicture.style.height = `${height}px`;
AOS.refresh();
}
}
document.querySelectorAll('.block-featured-cards').forEach((block) => {
new FeaturedCards( block );
});
Animation: