Cards with effects

Hi,
I followed the instructions from this video to style the cards on the homepage.
But is not working properly on the mobile view.

Would you please take a look?

This is the css added, in addition to some effects.

/*--------Cards-----*/	
.mtb-card:before{
	position: absolute; 
	content: '';
width: 50px;
aspect-ratio: 1/1;
bottom: 0px;
right: 0px;
background-color: var(--base);
z-index: 1;
border-top-left-radius:12px;
transform: translatex(50px);
opacity:0
transition: all 250ms ease;}
.mtb-card:hover.mtb-card:before{
	transform: translatex(0px);
	opacity: 1;}
.mtb-image{
	position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		object-fit:cover;
		transition: all 250ms ease;
	}
.mtb-card::after{
	position:absolute;
	content:'';
	width:100%;
	height:120%;
  inset:0;
  background: linear-gradient(180deg, rgba(13,59,102,0) 0%, rgba(13,59,102,1) 100%);
	transition: all 250ms ease;}
	.mtb-card:hover.mtb-card::after{
		height:100%
	}
	.mtb-card:hover .mtb-image{
		transform:scale(1.02)
	}
.inside-header.grid-container {
    max-width: 1200px !important;
}