@media screen and (min-width: 501px) {
	.lg\:hidden {
		display: none;
	}

	.lg\:block {
		display: block;
	}

	.lg\:flex {
		display: flex;
	}

	.lg\:grid {
		display: grid;
	}
	header {
		display: flex;
		align-items: center;
		gap: 1rem;
		justify-content: space-between;
		padding-left: 1rem;
		padding-right: 1rem;
		border: none;

		max-width: 1200px;
		margin: 0 auto;
	}

	input {
		text-align: center;
		padding: 0.5rem 3rem;
		border-radius: 9999px;
		border: none;
		background-color: #eaeaea;
	}

	nav {
		background-color: #eaeaea;
		overflow: hidden;
	}

	nav > ul {
		list-style: none;
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	nav > ul > li > a {
		text-decoration: none;
		color: #ff7f50;
	}

	nav > ul > li > a:hover {
		text-decoration: underline;
	}

	main {
		display: flex;
		max-width: 1200px;
		margin: 1rem auto;
	}

	div.post {
		/* max-width: 30rem; */
		display: flex;
		gap: 2rem;
	}

	div.post-img {
		width: 12rem;
		height: 12rem;
		overflow: hidden;
		flex: none;
	}

	img.post-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	div.secondary-content {
		width: max(800px, 50%);
		min-width: 200px;
		overflow: hidden;
		padding: 2rem 1rem;
		background-color: #eaeaea;
		border-radius: 15px;
	}

	h2.sec-title {
		font-size: 1.7rem;
		font-weight: bold;
		color: #444;
	}

	div.sec-img {
		width: 100%;
		height: 20rem;
		overflow: hidden;
	}

	img.sec-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.footer {
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem 1rem;
	}

	.socials {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.social-link {
		color: #fff;
		text-decoration: none;
	}

	.social-link:hover {
		text-decoration: underline;
	}
}