main {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 7rem;
	margin-bottom: 480px;
	box-sizing: border-box;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.hero-section {
	background: url('../img/hero-bg.webp') no-repeat center center/cover;
	color: #fff;
	padding: 100px 0;
	text-align: left;
	position: relative;
	align-items: center;
	height: 400px;
	margin: 1rem;
	border-radius: 2rem;
	box-sizing: border-box;
	overflow: clip;
	box-shadow: 0 0 15px #202E30;
	display: flex;
	justify-content: center;
}

/* Refactored from .hero-section p */
.hero-section p {
	position: relative;
	width: 100%;
	z-index: 1;
	font-size: 5dvw;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 0 10px #33333391;
}

/* Refactored from .hero-section::before */
.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 0;
}

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin: 4rem auto;
	box-sizing: border-box;
}

/* Refactored from .post-list article */
.post-list article {
	background-color: var(--of-white);
	padding: .5rem;
	border-radius: 2rem;
	box-shadow: 0 0 20px rgba(24, 36, 33, .25);
}

/* Refactored from .post-list article .card-top */
.post-list article .card-top {
	height: 270px;
	position: relative;
}

/* Refactored from .post-list article .card-top h1 */
.post-list article .card-top h1 {
	z-index: 1;
	position: absolute;
	bottom: 0.7rem;
	font-size: 1rem;
	font-weight: 600;
	left: 1rem;
	color: var(--black);
}

/* Refactored from .post-list article .card-top img */
.post-list article .card-top img {
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
	position: absolute;
	top: 0;
	box-shadow: 0 0 10px rgba(20, 40, 35, .15);
	transition: all .3s ease;
	z-index: 0;
}

/* Refactored from .post-list article .card-top::after */
.post-list article .card-top::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom, #DBF1EB00 0%, #dbf1ebc4 65%);
	transition: all .3s ease;
}

/* Refactored from .post-list article p */
.post-list article p {
	margin: 1rem 1.2rem;
}

/* Refactored from .post-list article a */
.post-list article a {
	position: relative;
	display: inline-block;
	color: var(--black);
	margin: 0 1.2rem 0.5rem;
	font-weight: 600;
	font-size: .8rem;
}

/* Refactored from .post-list article a:before */
.post-list article a:before {
	content: "";
	display: block;
	width: .3rem;
	height: .3rem;
	border: 1px solid var(--black);
	border-top: none;
	border-left: none;
	transform: rotate(-45deg) translateY(-50%);
	left: calc(100% + 3.3rem);
	position: absolute;
	top: 50%;
	transition: left .3s;
}

/* Refactored from .post-list article a:after */
.post-list article a:after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	background: var(--black);
	transition: width .3s;
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: .5rem;
}

/* Refactored from .post-list article a:hover:before */
.post-list article a:hover:before {
	left: calc(100% + 5.3rem);
}

/* Refactored from .post-list article a:hover:after */
.post-list article a:hover:after {
	width: 5rem;
}

/* Refactored from .post-list article:hover .card-top img, .post-list article:hover .card-top::after */
.post-list article:hover .card-top img,
.post-list article:hover .card-top::after {
	transform: scale(1.01);
}

/* Refactored from .post-list article:hover a:before */
.post-list article:hover a:before {
	left: calc(100% + 5.3rem);
}

/* Refactored from .post-list article:hover a:after */
.post-list article:hover a:after {
	width: 5rem;
}

.pagination {
	grid-column: 1;
}

/* Refactored from .pagination ul */
.pagination ul {
	display: flex;
	gap: 1rem;
}

@media only screen and (max-width: 767px) {
	main {
		margin-bottom: 600px;
		width: 100%;
	}

	.hero-section {
		margin: 1rem 2%;
	}

	.hero-section p {
		font-size: 15dvw;
	}

	.post-list.container {
		padding: 0 1% !important;
	}

	.post-list article .card-top {
		height: 200px;
	}
}