.blog .flex-container-1 {
display: flex; flex-flow: row wrap; justify-content: space-between;
}
.blog .flex-container-1 .flex-item {
border-radius: 0; background: linear-gradient(180deg, hsla(0, 0%, 25%, 1) 2%, hsla(0, 0%, 15%, 0) 92%); box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.10); width: 32%; overflow: hidden;
}
.blog .flex-container-1 .img-container {
position: relative;
}
/* Active faded image by uncommenting the line below of CSS */
.blog .flex-container-1 .img-container::before {
/* background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255)); */
content: ''; top: 50%; bottom: 0; left: 0; right: 0; position: absolute;
}
.blog .flex-container-1 .flex-item h3,
.blog .flex-container-1 .flex-item p {
max-width: 376px; padding: 0 25px;
}
.blog .flex-container-1 .flex-item p:last-of-type {
margin-top: 20px; margin-bottom: 35px; transition: all .2s ease-in-out;
}
.blog .flex-container-1 .flex-item {
display: flex; flex-direction: column; position: relative;
}
.blog .flex-container-1 .flex-item::before {
content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(180deg, hsla(151, 90%, 46%, .5) 2%, hsla(151, 90%, 46%, 0) 92%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.blog .text-wrap {
position: relative; z-index: 2;
}
.blog .flex-container-1 .flex-item p.text-muted {
/* flex-grow: 1; */
color: hsl(0, 0%, 85%);
}
@media (min-width: 992px) {
.blog .flex-container-1 .flex-item .img-container: : before {
z-index: 1;
}
.blog .flex-container-1 .flex-item .img-container {
overflow: hidden; position: relative;
}
.blog .flex-container-1 .flex-item .img-background {
transform: scale(1.01); transition: all 1s ease;
}
.blog .flex-container-1 .flex-item:hover .img-background {
transform: scale(1.05);
}
.blog .flex-container-1 .flex-item:hover p:last-of-type {
color: var(--cta-color);
}
}
@media (max-width: 991px) {
.blog .flex-container-1 .flex-item {
width: 100%;
}
.blog .flex-container-1 .flex-item-2 {
margin: 35px 0;
}
.blog .flex-container-1 .flex-item .img-background {
padding-top: 30% !important;
}
.blog .flex-container-1 .flex-item h3,
.blog .flex-container-1 .flex-item p {
max-width: 100%;
}
}