#the-blog {
	.container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		overflow: hidden;
		@media (min-width: 375px) {
			gap: 0.5rem;
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 390px) {
			gap: 1rem;
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
		}
		.the-post {
			display: flex;
			flex-direction: column;
			border: 1px solid white;
			overflow: hidden;
			position: relative;
			@media (min-width: 540px) {
				border-color: rgba(255, 255, 255, 0.1);
			}
			.fim {
				width: 100%;
				display: block;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}
			}
			.meta {
				padding: 1rem;
				h3 {
					font-size: 0.8rem;
					font-weight: 400;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
					line-clamp: 4;
					line-height: 1.4em;
					max-height: calc(4 * 1.4em);
					@media (min-width: 375px) {
						font-size: 0.6rem;
					}
					@media (min-width: 390px) {
						font-size: 0.8rem;
					}
					@media (min-width: 992px) {
						font-size: 1rem;
						font-weight: 400;
					}
				}
			}
			&:nth-child(1) {
				border: none;
				@media (min-width: 375px) {
					grid-column: span 2;
				}
				.fim {
					aspect-ratio: 16/9;
					img {
						object-fit: cover;
					}
				}
				.meta {
					position: absolute;
					bottom: 0;
					left: 0;
					background: rgba(0, 0, 0, 0.9);
				}
			}
		}
	}
}