.breadcrumb {padding-block: 15px; background: #F8F8FA;}
.breadcrumb ul {margin: 0; padding: 0;}
.breadcrumb li {list-style-type: none; display: inline;}
.breadcrumb li:not(:first-child):before {content: "/";}
.breadcrumb li :where(a, span) {text-decoration: none; line-height: 1.2; color: #343a40;}
.breadcrumb li a:hover {color: var(--clr-red-dk); transition: var(--transition);}

.blog {padding: 15px 0 20px; --clr-link: #007bff; --clr-link-dk: #0056b3; --clr-post-title: #343a40; --clr-border: #f0f1f4; --clr-bg-light: #f0f1f4;}
.blog .columns {display: grid; grid-template-columns: 66% 1fr; gap: 30px; transition: var(--transition);}
.blog .blog-post {position: relative; display: block; margin-bottom: 30px;}
.blog .blog-post .content {display: none; position: absolute; inset: auto 0 0; background-color: rgb(0 0 0 / .6); padding: 20px; color: #fff;}
.blog .blog-post .content :first-child {font-size: var(--fs-30); font-weight: var(--fw-700); line-height: 1.5; height: 90px; overflow: hidden; margin: 0;}
.blog .blog-post .content p {font-size: var(--fs-16); color: #fff; height: 72px; overflow: hidden; margin-bottom: 16px;}
.blog .blog-post .read-btn {display: block; width: fit-content; background-color: var(--clr-red-dk); padding: 16px 36px; font-size: var(--fs-14); font-weight: var(--fw-600); border-radius: 24px; color: #fff; text-transform: uppercase;}
.blog .posts .title {background-color: var(--clr-post-title); border-bottom: 3px solid var(--clr-red-dk); padding: 10px; margin-bottom: 8px;}
.blog .posts .title > * {color: #fff; font-size: var(--fs-16); font-weight: var(--fw-700);}
.blog .posts ul li {padding: 10px; border-bottom: 1px solid var(--clr-border);}
.blog .posts li a {color: var(--clr-link); line-height: 1.5; transition: var(--transition);}
.blog .pagination .page-numbers  {display: inline-flex; align-items: center; margin-right: 10px;}
.blog .pagination .page-numbers{background-color: var(--clr-bg-light); padding: 15.5px 16px;}
.blog .pagination .current{background-color: var(--clr-red); color: #fff;}
.blog .pagination .page-numbers:hover{background-color: var(--clr-red); color: #fff;}
/* .blog .sidebar {position: sticky; top: 82px; height: fit-content;} */
.blog .blog-post:hover .content {display: block;}
.blog .posts li a:hover {color: var(--clr-link-dk);}

/* Media Query */
@media only screen and (width <= 1200px) {
	:root {--fs-30: 26px;}
	.blog .columns {grid-template-columns: 60% 1fr;}
	.blog .blog-post .content :first-child {height: 80px;}
}
@media only screen and (width <= 991px) {
	:root {--fs-30: 24px;}
	.blog .columns {grid-template-columns: 55% 1fr; gap: 15px;}
	.blog .blog-post {margin-bottom: 15px;}
	.blog .blog-post .content {height: 100%;}
	.blog .blog-post .content :first-child {line-height: 1.2; height: 60px;}
	.blog .blog-post .content p {margin-bottom: 12px;}
	.blog .blog-post .read-btn {padding-block: 10px;}
}
@media only screen and (width <= 767px) {
	.blog .columns {grid-template-columns: 1fr; gap: 20px;}
	.blog .blog-post .content {height: auto;}
	.blog .quote-form {max-width: 560px; margin-inline: auto;}
}
@media only screen and (width <= 475px) {
	:root {--fs-30: 20px; --fs-16: 15px; --fs-14: 12px;}
	.blog .blog-post img {height: 205px; object-fit: cover; object-position: left;}
	.blog .blog-post .content {height: 100%; padding: 15px;}
	.blog .blog-post .content :first-child {height: 50px;}
}