.blog-post-page {
display: flex;
flex-flow: row nowrap;
justify-content: center;
gap: 96px;
margin-bottom: 48px;
padding: 0px 40px;
box-sizing: border-box;
.blog-post-page-inner {
padding: 0px 15px;
gap: 96px;
flex: 1;
display: flex;
flex-flow: row nowrap;
box-sizing: border-box;
}
.blog-post-page-breadcrumbs {
width: 100%;
display: flex;
flex: 100%;
padding: 20px 0px;
align-items: center;
font-size: 14px;
line-height: 20px;
gap: 5px;
.breadcrumbs-category-link {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.blog-post-page-post-categories {
display: flex;
flex-flow: column nowrap;
padding: 20px 0px;
gap: 8px;
.blog-post-page-post-categories-header {
padding-bottom: 8px;
font-size: 14px;
line-height: 110%;
font-weight: 500;
}
}
.blog-post-page-related-posts {
display: flex;
flex-flow: column nowrap;
padding: 40px 0px;
gap: 20px;
.blog-post-page-related-posts-title {
h3 {
font-size: 30px;
line-height: 110%;
font-weight: 400;
letter-spacing: 1px;
margin: 0px;
}
}
}
.hidden {
display: none;
}
}
.blog-post-page-container {
flex: 1;
box-sizing: border-box;
.blog-post-page-related-posts-title {
h3 {
font-size: 24px;
font-weight: 300;
}
}
}
@media (max-width: 991px) {
.blog-post-page{
display: block;
flex-flow: column;
padding: 0px 20px;
.blog-post-page-inner {
flex-flow: column nowrap;
gap: 0px;
padding: 0px;
.blog-post-page-container {
width: 100%;
}
}
.blog-post-list-posts {
display: flex;
gap: 10px;
padding: 10px 5px;
.blog-post-list-post {
width: 295px;
height: 346px;
min-width: 295px;
min-height: 346px;
}
}
}
.blog-post-page-sidebar {
max-width: 100%;
width: 100%;
box-sizing: border-box;
background: #f5f5f5;
}
}
@media (max-width: 960px) {
.blog-post-page {
.blog-post-list-posts {
overflow-x: auto;
scrollbar-width: none;
margin-right: -20px;
}
}
}
@media (min-width: 1920px) {
.blog-post-page {
.blog-post-list-posts {
.blog-post-list-post {
height: 437px;
width: 100%;
min-width: 250px;
figure {
height: 257px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
@media (min-width: 1300px) and (max-width: 1920px) {
.blog-post-page {
.blog-post-list-posts {
.blog-post-list-post {
flex: 1;
height: 351px;
width: 100%;
figure {
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
@media (min-width: 992px) and (max-width: 1299px) {
.blog-post-page {
justify-content: normal;
.blog-post-page-inner {
max-width: 100%;
.blog-post-list-posts {
display: grid;
grid-template-columns: repeat(2, 1fr);
.blog-post-list-post {
min-width: 232px;
height: 311px;
width: 100%;
figure {
display: flex;
justify-content: center;
align-items: center;
height: 130px;
}
}
}
}
}
}
@media (max-width: 991px) {
.blog-post-page {
.blog-post-page-sidebar {
margin-top: 0px;
.blog-post-sidebar-section.lead-form-section {
.blog-post-sidebar-contact-us-button {
margin-bottom: 30px;
}
}
}
}
}
@media (min-width: 641px) and (max-width: 991px) {
.blog-post-page {
padding: 0px;
.blog-post-page-container {
padding: 0px 20px;
}
.blog-post-list-posts {
margin-right -20px;
padding-right: 20px;
.blog-post-list-post {
width: 285px;
height: 340px;
figure {
height: 160px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
@media (max-width: 640px) {
.blog-post-page {
padding: 0px;
.blog-post-page-container {
padding: 0px 20px;
}
.blog-post-list-posts {
margin-right: -20px;
padding-right: 20px;
.blog-post-list-post {
height: 311px;
width: 232px;
figure {
height: 130px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
@media (min-width: 1200px) {
.blog-post-page {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
}