.contacts__hero {
	display: grid;
	isolation: isolate;
}

.contacts__hero > * {
	grid-column: 1/-1;
	grid-row: 1/-1;
}

.contacts__hero img {
	width: 100%;
	height: 100%;
	max-height: 12.5rem;
	object-position: center;
	object-fit: cover;
	filter: brightness(80%);
	z-index: -1;
}

.contacts__hero .hero__content {
	display: grid;
	place-items: center;
	height: fit-content;
	align-self: center;
	padding: 2rem;
	text-align: center;
	color: var(--clr-jv-white);
}

.hero__content h1 {
	font-size: var(--fs-jv-title-lg);
	letter-spacing: (--ls-jv-title-lg);
	line-height: var(--lh-jv-title-lg);
}

.hero__content p {
	font-family: var(--ff-jv-title);
	font-weight: 300;
	font-size: var(--fs-jv-pbig);
	letter-spacing: (--ls-jv-pbig);
	line-height: var(--lh-jv-pbig);
}

.contacts__list {
	padding: 5rem 2rem;
}

.contacts__list-content {
	max-width: 70rem;
	margin-inline: auto;
	display: grid;
	gap: 2rem;
}

.contacts__list-element {
	display: grid;
	align-items: center;
	gap: 1rem;
}

.contacts__list-element > * {
	min-width: 0;
}

.contacts__list-element iframe {
  background: linear-gradient(-45deg, #eee, #ddd, #eee, #ddd);
	background-size: 200%;
	animation: gradient 10s ease infinite;
	border: none;
	width: 100%;
	border-radius: var(--br-jv-md);
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@media screen and (min-width: 768px) {
	.contacts__list-element {
		grid-template-columns: repeat(2, 1fr);
	}
}

.contacts__list-element__info > * + * {
	margin-top: 0.5em;
}

.contacts__list-element__info h2 {
	display: flex;
	align-items: center;
	font-size: var(--fs-jv-title-sm);
	letter-spacing: var(--ls-jv-title-sm);
	line-height: var(--lh-jv-title-sm);
	gap: 0.25rem;
}

.contacts__list-element__info p,
.contacts__list-element__info .social {
	font-size: var(--fs-jv-p-sm);
	letter-spacing: var(--ls-jv-p-sm);
	line-height: var(--lh-jv-p-sm);
}

.contacts__list-element__info .social {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.contacts__legal {
	padding: 5rem 2rem;
	background-color: var(--clr-jv-yellow);
}

.contacts__legal-content {
	max-width: 70rem;
	margin-inline: auto;
	display: grid;
	gap: 1rem;
	color: var(--clr-jv-teal_dark);
}

.contacts__legal-content h2 {
	font-family: var(--ff-jv-body);
}

.contacts__legal-content p,
.contacts__legal-content h2 {
	font-size: var(--fs-jv-paragraph);
	letter-spacing: var(--ss-jv-paragraph);
	line-height: var(--lh-jv-paragraph);
}

.contacts__legal-content p:first-of-type {
	font-family: var(--ff-jv-subtitle);
	font-weight: 700;
	font-size: var(--fs-jv-subtitle);
	letter-spacing: var(--ls-jv-subtitle);
	line-height: var(--lh-jv-subtitle);
	color: var(--clr-jv-teal_dark);
	margin-bottom: 0.5em;
}

@media screen and (min-width: 768px) {
	.contacts__legal-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

.contacts__hr {
	padding: 5rem 2rem;
	background-color: var(--clr-jv-teal_light);
}

.contacts__hr-content {
	max-width: 70rem;
	margin-inline: auto;
	color: var(--clr-jv-white);
	text-align: center;
}

.contacts__hr-content h2 {
	font-size: var(--fs-jv-title-md);
	letter-spacing: var(--ls-jv-title-md);
	line-height: var(--lh-jv-title-md);
	margin-bottom: 1rem;
}

.contacts__hr-content .keyword {
	font-family: var(--ff-jv-subtitle);
	font-size: clamp(1.75rem, 1.6058rem + 0.641vw, 2.375rem);
	font-style: normal;
	line-height: clamp(1.75rem, 1.6058rem + 0.641vw, 2.375rem);
	font-weight: 700;
	color: var(--clr-jv-teal_dark);
}

.contacts__hr-content p {
	max-width: 84ch;
  margin-inline: auto;
}

.contacts__hr-content a:hover {
	color: var(--clr-jv-yellow);
}