.blog-section {
min-height: calc(100dvh - 200px);
padding: 200px 0 0 0;
}
.header-image {
z-index: -1;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: url(//mobile-labs.fr/wp-content/themes/images/blogging-coding-copywriting-34578-scaled.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 200px;
width: 100vw;
width: calc(var(--vw, 1vw) * 100);
}
.header-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: linear-gradient(to bottom, rgb(53, 51, 73, 0.5), rgb(0, 0, 0, 0.6));
}
.blog-section h1 {
text-align: center;
color: var(--white-color);
vertical-align: bottom;
position: relative;
z-index: 2;
bottom: -85px;
}
.blog-section h2 {
font-size: min(max(20px, 1.6vw), 25px);
font-weight: 500;
}
.blog-section p {
font-size: min(max(.85rem, 1vw), 12px);
letter-spacing: .05rem;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.main-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 40px;
padding: 0 30px 100px 30px;
margin: -30px auto auto auto;
z-index: 2;
max-width: 1200px;
}
.article-card {
border-radius: 25px;
background-color: var(--white-color);
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
min-height: 250px;
padding: 7px;
display: grid;
align-content: start;
}
.article-card p {
font-size: 13px;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}
.article-card h2 a {
font-family: Poppins, sans-serif;
font-size: min(max(20px, 1.6vw), 25px);
}
.article-read-more {
text-decoration: underline !important;
}
.article-read-more:hover {
color: #edc44a !important;
}
.article-date,
.article-category,
.articleReadTime {
display: block;
}
.article-card .wp-block-template-part,
.meta-first-row {
width: 100%;
}
.bsf-rt-reading-time {
display: flex;
}
.article-image {
z-index: 2;
overflow: hidden;
height: 185px;
border-radius: 18px 18px 0 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.article-image img {
z-index: -1;
min-height: 185px;
object-fit: cover;
}
.article-infos {
display: flex;
font-size: 11px;
justify-content: space-between;
margin-bottom: 7px;
gap: 5px;
}
.article-text {
padding: 15px 20px 0 20px;
height: 200px;
}
.article-text a:hover {
color: var(--primary-color);
}
.article-author {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 0 20px;
}
.article-author img {
max-width: initial !important;
width: initial !important;
}
.article-author em {
font-weight: 600;
font-style: normal;
}
.article-author img {
max-height: 50px;
max-width: 50px;
object-fit: contain !important;
}
.page-button-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
.next-page-button {
max-width: fit-content;
display: block;
color: var(--secondary-color);
font-weight: 600;
text-decoration: underline;
margin: 0 auto 70px 0;
font-size: 13px;
padding: 15px 30px;
background-color: var(--primary-color);
border-radius: 25px;
}
.next-page-button:hover {
background-color: var(--secondary-color);
color: #ffffff !important;
}
@media screen and (max-width: 700px) {
.blog-section h1 {
bottom: -110px;
}
}