.palermo-blog-page,
.palermo-blog-article-page {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	color: #ffffff;
	background: #565656;
	font-family: "Raleway", sans-serif;
	overflow: hidden;
}

.palermo-blog-hero {
	position: relative;
	width: 100vw;
	height: 926px;
	margin-left: calc(50% - 50vw);
	padding: 110px 0 0;
	display: block;
	background: #777777;
}

.palermo-blog-hero__label {
	position: absolute;
	top: 50%;
	left: max(52px, calc((100vw - 1210px) / 2));
	transform: translateY(-50%);
	z-index: 2;
	width: min(620px, calc(100vw - 104px));
}

.palermo-blog-hero h1 {
	margin: 0 !important;
	color: #ffffff !important;
	font-family: "Oswald", sans-serif !important;
	font-size: clamp(52px, 5.9vw, 85px) !important;
	font-weight: 500 !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.palermo-blog-hero p {
	max-width: 605px;
	margin: 8px 0 0 !important;
	color: #e6bd7b !important;
	font-family: "Oswald", sans-serif !important;
	font-weight: 400 !important;
	font-size: clamp(24px, 2.43vw, 35px) !important;
	line-height: 120% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-shadow: 0 3px 35px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.75);
}

.palermo-blog-hero__image {
	position: absolute;
	top: 110px;
	right: 0;
	width: 1200px;
	height: 940px;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
	outline: 0;
	box-shadow: 28px 24px 28px -18px rgba(0, 0, 0, 0.35);
}

.palermo-blog-hero__image img,
.palermo-blog-hero__image video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: fill;
	object-position: center;
}

.palermo-blog-hero__image video {
	pointer-events: none;
}

.palermo-blog-hero__scroll {
	position: absolute;
	left: 64px;
	bottom: 210px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	transform: none;
	color: #111111 !important;
	background: #ffffff !important;
	border: 6px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 50%;
	background-clip: padding-box;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.palermo-blog-list {
	width: min(100% - 180px, 1280px);
	margin: 0 auto;
	padding: 240px 0 120px;
	text-align: center;
}

.palermo-blog-list h2 {
	max-width: 1200px;
	margin: 0 auto 78px !important;
	color: #ffffff !important;
	font-family: "Oswald", sans-serif !important;
	font-weight: 400 !important;
	font-size: 48px !important;
	line-height: 122% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-align: center;
}

.palermo-blog-filters {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin-bottom: 58px;
}

.palermo-blog-filters button,
.palermo-blog-more,
.palermo-blog-back {
	color: #ffffff !important;
	background: transparent !important;
	border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
	border-radius: 999px !important;
	font-family: "Raleway", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 120% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 12px 30px !important;
	cursor: pointer;
}

.palermo-blog-filters button.is-active,
.palermo-blog-filters button:hover,
.palermo-blog-more:hover {
	color: #ffffff !important;
	background: #ebc186 !important;
	border-color: #ebc186 !important;
	box-shadow: 0 6px 12px rgba(235, 193, 134, 0.28);
}

.palermo-blog-back:hover,
.palermo-blog-back:focus-visible {
	color: #ebc186 !important;
	background: transparent !important;
	border-color: #ebc186 !important;
	box-shadow: none;
}

.palermo-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
	text-align: left;
}

.palermo-blog-card {
	border-radius: 6px;
	background: #747474;
	overflow: hidden;
}

.palermo-blog-card.is-hidden {
	display: none;
}

.palermo-blog-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.palermo-blog-card img {
	width: 100%;
	height: 245px;
	display: block;
	object-fit: cover;
}

.palermo-blog-card__body {
	padding: 18px 20px 24px;
}

.palermo-blog-card time {
	display: block;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.72);
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
}

.palermo-blog-card strong {
	display: block;
	color: #ebc186;
	font-family: "Raleway", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 150%;
	letter-spacing: 0;
	text-transform: uppercase;
}

.palermo-blog-card h3 {
	margin: 4px 0 8px !important;
	color: #ffffff !important;
	font-family: "Raleway", sans-serif !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 120% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}

.palermo-blog-card p {
	margin: 0 0 14px !important;
	color: #ffffff !important;
	font-family: "Raleway", sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
}

.palermo-blog-card span {
	color: #ffffff;
	font-family: "Raleway", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.palermo-blog-more {
	margin-top: 58px;
}

.palermo-blog-more.is-hidden {
	display: none;
}

.palermo-blog-article-hero {
	position: relative;
	width: 100vw;
	height: 100svh;
	min-height: 475px;
	margin-left: calc(50% - 50vw);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
}

.palermo-blog-article-hero__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.palermo-blog-article-hero__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
}

.palermo-blog-article-hero__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.palermo-blog-article-hero h1 {
	position: relative;
	z-index: 2;
	width: min(100% - 120px, 1200px);
	justify-self: center;
	margin: 0 !important;
	color: #ffffff !important;
	font-family: "Oswald", sans-serif !important;
	font-size: 85px !important;
	font-weight: 500 !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-align: left;
	text-transform: uppercase;
	text-shadow: 0 8px 12px rgba(0, 0, 0, 0.22);
}

.palermo-blog-article h2,
.palermo-blog-recent h2 {
	margin: 0 !important;
	color: #ffffff !important;
	font-family: "Oswald", sans-serif !important;
	font-weight: 400 !important;
	line-height: 110% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	text-shadow: 0 8px 12px rgba(0, 0, 0, 0.22);
}

.palermo-blog-article {
	width: min(100% - 180px, 1280px);
	margin: 0 auto;
	padding: 92px 0 110px;
}

.palermo-blog-back {
	display: inline-flex;
	align-items: center;
	margin-bottom: 44px;
}

.palermo-blog-article h2 {
	width: 100%;
	font-family: "Oswald", sans-serif !important;
	font-size: 50px !important;
	font-weight: 400 !important;
	line-height: 122% !important;
	letter-spacing: 0 !important;
	margin-bottom: 24px !important;
}

.palermo-blog-article time {
	display: block;
	margin-bottom: 38px;
	color: #ebc186;
	font-family: "Raleway", sans-serif;
	font-size: 22px;
	font-weight: 800;
	line-height: 120%;
	letter-spacing: 0;
	text-transform: uppercase;
}

.palermo-blog-article p {
	color: #ffffff !important;
	font-family: "Raleway", sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	letter-spacing: 0 !important;
	margin: 0 0 24px !important;
}

.palermo-blog-article__intro {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 70px;
	align-items: start;
}

.palermo-blog-article__intro img {
	width: 100%;
	height: 430px;
	display: block;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.palermo-blog-recent {
	position: relative;
	padding: 74px 0 112px;
	background: linear-gradient(to bottom, #777777 0 50%, #565656 50% 100%);
	overflow: hidden;
}

.palermo-blog-recent__inner {
	width: min(100% - 180px, 1280px);
	margin: 0 auto;
}

.palermo-blog-recent h2 {
	position: relative;
	margin: 0 0 46px !important;
	font-size: 52px !important;
	padding-left: calc((100% - 100px) / 6 + 32px);
}

.palermo-blog-recent h2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc((100vw - 100%) / -2);
	width: calc((100vw - 100%) / 2 + (100% - 100px) / 6 + 14px);
	height: 2px;
	background: #e6bd7b;
	transform: translateY(-50%);
}

@media (max-width: 900px) {
	.palermo-blog-list,
	.palermo-blog-article,
	.palermo-blog-recent__inner {
		width: min(100% - 36px, 760px);
	}

	.palermo-blog-hero {
		width: min(100% - 36px, 760px);
		height: auto;
		min-height: auto;
		padding-top: 110px;
	}

	.palermo-blog-hero__label {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: auto;
		margin-left: 0;
		padding-top: 0;
	}

	.palermo-blog-hero h1 {
		white-space: normal;
	}

	.palermo-blog-hero__image {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: 360px;
	}

	.palermo-blog-hero__scroll {
		left: 50%;
		bottom: 28px;
		transform: translateX(-50%);
	}

	.palermo-blog-filters {
		flex-wrap: wrap;
		gap: 12px;
	}

	.palermo-blog-grid,
	.palermo-blog-article__intro {
		grid-template-columns: 1fr;
	}

	.palermo-blog-recent h2 {
		padding-left: 0;
	}

	.palermo-blog-recent h2::before {
		display: none;
	}

	.palermo-blog-article-hero h1 {
		width: min(100% - 48px, 760px);
		font-size: 48px !important;
	}
}

@media (min-width: 701px) and (max-width: 900px) {
	.palermo-blog-hero {
		width: 100vw;
		height: 453px;
		min-height: 0;
		margin-left: calc(50% - 50vw);
		padding-top: 48px;
	}

	.palermo-blog-hero__label {
		width: min(620px, calc(100vw - 104px));
		margin-left: 52px;
		padding-top: 174px;
	}

	.palermo-blog-hero h1 {
		white-space: nowrap;
	}

	.palermo-blog-hero__image {
		position: absolute;
		top: 48px;
		right: 0;
		width: min(582px, calc(100vw - 202px));
		height: min(405px, calc((100vw - 202px) * 0.6959));
	}
}

@media (max-width: 700px) {
	.palermo-blog-hero__image {
		width: 100%;
		height: 360px;
	}
}