@mixin blog-card($grid-columns, $grid-rows, $font-size, $img-w, $img-h, $img-radius, $bg-color){
display: grid;
grid-template-columns: $grid-columns;
grid-template-rows: $grid-rows;
box-shadow: 0px 5px 20px 0px RGB(88 83 153 / 10%);
transition: all 0.3s;
margin-bottom: 15px;
align-items: center;
gap: 15px;
background-color: $bg-color;
padding: 25px;
border-radius: 10px;
&--category{
font-size: 15px;
font-weight: 500;
display: inline-flex;
border-bottom: 5px solid $color-secondry;
}
&--img{
width: $img-w;
height: $img-h;
border-radius: $img-radius;
object-fit: cover;
}
&--title{
font-size: $font-size;
font-weight: 600;
margin-top: 15px;
a{
color: $color-primary;
text-decoration: none;
background: linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
&:hover, a:focus{
background-size: 100% 5px;
}
}
}
}