.grid-post3 {
display: grid;
grid-template-areas: 'grid_item_one grid_item_two grid_item_three' 'grid_item_four grid_item_five grid_item_five';
grid-gap: 20px;
}
.grid-post3 .item {
width: 100%;
position: relative;
background-size: cover;
transition-duration: .3s;
overflow: hidden;
min-height: 250px;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5);
}
.grid-post3 .item .post-item-details {
width: 100%;
}
.grid-post3 .item a {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: right;
padding: 20px 20px 20px 20px;
}
.grid-post3 .item a .post-meta {
margin: 3px 0 0;
}
.grid-post3 .item a span {
display: inline-block;
}
.grid-post3 .item a .post-meta span:not(:first-of-type) {
margin: 0 10px;
}
.grid-post3 .item:nth-of-type(1) {
grid-area: grid_item_one;
}
.grid-post3 .item:nth-of-type(2) {
grid-area: grid_item_two;
}
.grid-post3 .item:nth-of-type(3) {
grid-area: grid_item_three;
}
.grid-post3 .item:nth-of-type(4) {
grid-area: grid_item_four;
}
.grid-post3 .item:nth-of-type(5) {
grid-area: grid_item_five;
}
.grid-post3 .item:nth-of-type(1) a {
background-image: linear-gradient(360deg, rgba(183, 28, 28, 0.77) -20%, rgba(12, 211, 31, 0) 70%);
}
.grid-post3 .item:nth-of-type(2) a {
background-image: linear-gradient(360deg, rgba(104, 159, 56, 0.5) -20%, rgba(12, 211, 31, 0) 70%);
}
.grid-post3 .item:nth-of-type(3) a {
background-image: linear-gradient(360deg, rgba(81, 45, 168, 0.77) -20%, rgba(12, 211, 31, 0) 70%);
}
.grid-post3 .item:nth-of-type(4) a {
background-image: linear-gradient(360deg, rgba(230, 81, 0, 0.77) -20%, rgba(12, 211, 31, 0) 70%);
}
.grid-post3 .item:nth-of-type(5) a {
background-image: linear-gradient(360deg, rgba(13, 71, 161, 0.77) -20%, rgba(12, 211, 31, 0) 70%);
}
.grid-post3 .item h3{
color: #fff;
font-size: 18px;
}
.grid-post3 .item h3,
.grid-post3 .item .post-meta {
width: 100%;
}
.grid-post3 .none-cover-overlay.item a {
background-image: none;
}
.grid-post3 .item a .post-meta span {
color: #fff;
font-size: 13px;
font-weight: 300;
}
@media screen and (max-width: 767px) {
.elementor .grid-post3 {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
grid-template-areas: none;
gap: 10px;
}
.elementor .grid-post3 .item {
grid-area: auto;
width: 100%;
margin-bottom: 20px;
}
}