.blog-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 90%;
}
.blog-class {
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.blog-article section {
background-color: white;
width: 100%;
}
.blog-article h1, h2, h3, h4, h5, h6 {
text-align: center;
margin: 1vh;
}
.blog-content {
	background-color: white;
	width: 100%;
	padding: 1vh;
}
.article-meta {
	background-color: white;
	display: flex;
	justify-content: center;
	width: 100%;
}
.text-block {
	background-color: white;
	display: flex;
	justify-content: center;
	width: 100%;
}
.blog-text {
	max-height: 40vh;
	overflow-y: auto;
	width: 80%;
	margin: 1vh;
}
.blog-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1vh;
}
.article-image {
	width: 50%;
	height: 50%;
}
.blog-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    gap: 2vh;
    padding-bottom: 4vh;
}
.blog-list-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 4vh;
	gap: 2vh;
}
.blog-article-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0px 20px 20px 2px rgb(0 0 0 / 15%);
	padding: 2vh;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}
.blog-article-card:hover {
	transform: scale(1.03);
  cursor: pointer;
}
.article-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.article-cover img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}
@media (max-width: 1440px) {
.blog-list-grid {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.article-image {
    width: 60%;
    height: 60%;
}
.article-cover img {
    height: auto;
    width: 400px;
    object-fit: contain;
}
}
@media (max-width: 768px) {
.article-image {
    width: 60%;
    height: 60%;
}
.blog-list-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
    gap: 2vh;
}
}
@media (max-width: 480px) {
	.blog-text {
    width: 100%;
}
.article-cover img {
    height: auto;
    width: 300px;
    object-fit: contain;
}
.article-image {
    width: 80%;
    height: 80%;
}
}
@media (max-width: 375px) {
.article-cover img {
    height: auto;
    width: 250px;
    object-fit: contain;
}