.about-us__hero {
	display: grid;
	isolation: isolate;
}

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

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

.about-us__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);
}

.about-us__highlights {
	padding: 5rem 2rem;
}

.about-us__highlights h3 {
	color: var(--clr-jv-teal_dark);
	font-size: var(--fs-jv-title-md);
	letter-spacing: var(--ls-jv-title-md);
	line-height: var(--lh-jv-title-md);
	margin-bottom: 2rem;
	text-align: center;
}

.about-us__highlights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem;
	max-width: 70rem;
	margin-inline: auto;
}

.about-us__highlights-grid .highlight__element {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	place-items: center;
}
.about-us__highlights-grid .highlight-content {
	justify-self: self-start;
}

.about-us__highlights-grid span {
	display: block;
}

.about-us__highlights-grid .highlight-number {
	font-size: var(--fs-jv-pbig);
	letter-spacing: var(--ls-jv-pbig);
	line-height: normal;
	font-weight: 700;
	color: var(--clr-jv-teal_light);
}

.about-us__coliving {
	padding: 5rem 2rem;
	background-color: var(--clr-jv-teal_light);
	color: var(--clr-jv-white);
	text-align: center;
}

.about-us__coliving-content {
	max-width: 84ch;
	margin-inline: auto;
}

.about-us__coliving h3 {
	font-size: var(--fs-jv-title-md);
	letter-spacing: var(--ls-jv-title-md);
	line-height: var(--lh-jv-title-md);
	margin-bottom: 2rem;
	text-align: center;
}

.about-us__coliving .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);
}

.about-us__philosophy {
	padding: 5rem 2rem;
	background-image: url(/assets/img/bg-philosophy.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.about-us__philosophy-circle {
	background: rgba(255, 255, 255, 0.7);
	aspect-ratio: 1;
	position: relative;
	left: 50%;
	max-width: 28rem;
	border-radius: 50%;
	backdrop-filter: blur(10px);
	display: grid;
	place-items: center;

	transition: var(--tr-jv-cubic);
}

@media screen and (max-width: 768px) {
	.about-us__philosophy-circle {
		left: 25%;
	}
}

@media screen and (max-width: 555px) {
	.about-us__philosophy-circle {
		left: 5%;
	}
}

.about-us__philosophy-content {
	padding: 3.5rem;
	transform: translateX(5%);
}

.about-us__philosophy-content h3 {
	font-family: var(--ff-jv-subtitle);
	font-size: var(--fs-jv-subtitle);
	letter-spacing: var(--ls-jv-subtitle);
	line-height: var(--lh-jv-subtitle);
	color: var(--clr-jv-teal_light);
	font-weight: 700;
}

.about-us__philosophy-content p {
	font-size: var(--fs-jv-p-sm);
	letter-spacing: var(--ls-jv-paragraph);
	line-height: var(--lh-jv-paragraph);
}

.about-us__benefits {
	padding: 5rem 2rem;
}

.about-us__benefits-content {
  max-width: 60rem;
  margin-inline: auto;
}

.about-us__benefits-content h3 {
  font-size: var(--fs-jv-title-md);
	letter-spacing: var(--ls-jv-title-md);
	line-height: var(--lh-jv-title-md);
	margin-bottom: 2rem;
	text-align: center;
  color: var(--clr-jv-teal_dark);
}

.about-us__benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  column-gap: 4rem;
  row-gap: 4rem;
}

.about-us__benefits .benefits__element {
  display: grid;
  place-items: center;
  gap: .5rem;
  text-align: center;
}

.about-us__benefits .benefits__element i {
  margin-bottom: 1rem;
}

.about-us__benefits .benefits__element h4 {
  font-family: var(--ff-jv-subtitle);
  font-size: var(--fs-jv-paragraph);
  line-height: var(--lh-jv-subtitle);
  font-weight: 700;
  color: var(--clr-jv-teal_dark);
}

.about-us__benefits .benefits__element p {
  font-size: var(--fs-jv-p-sm);
}