.blog-post-listings-page {
display: flex;
flex-flow: row nowrap;
justify-content: center;
gap: 40px;
margin-bottom: 48px;
padding: 0px 40px;
box-sizing: border-box;
.blog-post-listings-page-container {
flex: 1;
box-sizing: border-box;
}
.blog-post-listings-page-inner {
gap: 40px;
flex: 1;
display: flex;
flex-flow: row nowrap;
box-sizing: border-box;
}
.blog-post-listings-page-breadcrumbs {
width: 100%;
display: flex;
flex: 100%;
padding: 20px 0px;
align-items: center;
font-size: 14px;
line-height: 20px;
gap: 5px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.featured-blog-post {
margin-top: 20px;
}
.blog-post-list {
flex-flow: row;
}
.blog-post-list-posts {
grid-template-columns: repeat(4, 1fr);
row-gap: 40px;
padding: 40px 0px;
}
&:has(.blog-listings-page-sidebar) {
.blog-post-list-posts {
grid-template-columns: repeat(3, 1fr);
}
.blog-listings-page-sidebar {
min-width: 300px;
margin-top: 160px;
}
}
}
.blog-post-listings-page-container {
flex: 1;
box-sizing: border-box;
}
.listings-page-pagination-root.hidden {
display: none;
}
@media (max-width: 991px) {
.blog-post-listings-page{
display: block;
flex-flow: column;
padding: 0px 20px;
.blog-post-listings-page-inner {
flex-flow: column nowrap;
gap: 0px;
padding: 0px;
.blog-post-listings-page-container {
width: 100%;
}
}
.blog-post-list-posts {
gap: 10px;
padding: 10px 5px;
.blog-post-list-post {
width: 295px;
height: 346px;
min-width: 295px;
min-height: 346px;
}
}
}
.blog-listings-page-sidebar {
max-width: 100%;
width: 100%;
box-sizing: border-box;
background: #f5f5f5;
}
}
@media (max-width: 960px) {
.blog-post-listings-page {
.blog-post-list-posts {
overflow-x: auto;
scrollbar-width: none;
margin-right: -20px;
}
}
}
@media (min-width: 1920px) {
.blog-post-listings-page {
.featured-blog-post {
article {
height: 422px;
h3 {
-webkit-line-clamp: 3;
}
p {
-webkit-line-clamp: 8;
}
}
}
.blog-post-list-posts {
.blog-post-list-post {
height: 437px;
width: 100%;
min-width: 250px;
figure {
display: flex;
justify-content: center;
align-items: center;
height: 257px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
@media (min-width: 1720px) and (max-width: 1919px) {
.blog-post-listings-page {
.blog-post-listings-page-container-root {
.featured-blog-post {
article {
height: 366px;
width: 100%;
min-width: 1299px;
.blog-post-card-content {
padding: 40px 40px 20px 40px;
h3 {
-webkit-line-clamp: 3;
}
p {
-webkit-line-clamp: 6;
}
}
}
}
.blog-post-list-posts {
grid-template-columns: repeat(4, 1fr);
.blog-post-list-post {
height: 354px;
width: 100%;
min-width: 310px;
figure {
height: 174px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
@media (min-width: 1300px) and (max-width: 1719px) {
.blog-post-listings-page {
.blog-post-listings-page-container-root {
.featured-blog-post {
article {
height: 248px;
width: 100%;
min-width: 880px;
.blog-post-card-content {
padding: 40px 40px 20px 40px;
h3 {
-webkit-line-clamp: 2;
}
p {
-webkit-line-clamp: 3;
}
}
}
}
.blog-post-list-posts {
justify-content: center;
.blog-post-list-post {
height: 338px;
width: 100%;
min-width: 280px;
figure {
height: 157px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
@media (min-width: 992px) and (max-width: 1299px) {
.blog-post-listings-page {
justify-content: normal;
.blog-post-listings-page-inner {
max-width: 100%;
gap: 40px;
}
.blog-post-listings-page-container {
.featured-blog-post {
article {
height: 247px;
width: 100%;
min-width: 572px;
.blog-post-card-content {
padding: 20px;
h3 {
-webkit-line-clamp: 3;
}
p {
-webkit-line-clamp: 5;
}
.blog-post-preview-actions {
display: none;
}
}
}
}
.blog-post-list-posts {
grid-template-columns: repeat(2, 1fr);
.blog-post-list-post {
width: 100%;
height: 335px;
min-width: 276px;
figure {
height: 155px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
@media (max-width: 991px) {
.blog-post-listings-page {
.blog-post-listings-page-inner {
.blog-post-listings-page-container {
padding: 0px;
.blog-post-listings-page-breadcrumbs {
padding: 20px;
}
.blog-post-listings-page-filter {
padding: 0px 20px;
}
.featured-blog-post {
padding: 20px 20px 10px 20px;
}
.blog-post-list-posts {
margin: 0px;
padding: 10px 20px;
}
.listings-page-pagination-root {
padding: 10px 20px 20px 20px;
}
}
.blog-listings-page-sidebar {
margin-top: 0px;
}
}
}
}
@media (min-width: 641px) and (max-width: 991px) {
.blog-post-listings-page {
padding: 0px;
.listings-page-pagination-root {
padding: 20px 0px;
}
.blog-listings-page-sidebar {
margin-top: 0px;
}
.blog-post-listings-page-container {
.blog-post-list-posts {
width: 100%;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 20px;
padding: 0px;
.blog-post-list-post {
width: 442px;
height: 466px;
width: 100%;
figure {
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
@media (max-width: 768px) {
.blog-post-listings-page {
.blog-post-listings-page-container {
.blog-post-listings-page-filter {
padding: 0px 0px 0px 20px !important;
}
}
}
}
@media (max-width: 640px) {
.blog-post-listings-page {
padding: 0px;
.blog-post-listings-page-container {
.blog-post-listings-page-breadcrumbs {
padding: 20px;
}
.blog-post-listings-page-filter {
padding: 0px 20px;
}
.featured-blog-post {
padding: 20px;
margin: 0px;
article {
height: 557px;
width: 100%;
flex-flow: column nowrap;
figure {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 337px;
}
.blog-post-card-content {
padding: 20px;
h3 {
-webkit-line-clamp: 2;
}
p {
-webkit-line-clamp: 3;
}
.blog-post-preview-actions {
display: none;
}
}
}
}
.blog-post-list-posts {
grid-template-columns: repeat(1, 1fr);
gap: 20px;
margin: 0px;
padding: 0px 20px 20px 20px;
.blog-post-list-post {
height: 557px;
width: 100%;
min-width: 100%;
max-width: 100%;
figure {
height: 337px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
}
}