/*********************
START: HERO
*********************/
.hero {
    height: 100vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
.hero::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.hero video,
.hero--video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
    position: relative;
    z-index: 2;
	width: 100% !important;
}

.hero--content__title {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 2rem;
}

.hero--content__title h1 {
    line-height: 90%;
    letter-spacing: -3%;
    font-weight: 300;
}

.hero--content__title ul {
    display: flex;
    align-items: center;
    column-gap: 3rem;
    row-gap: 1rem;
}

.hero--content__title ul li {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.hero--content__title ul li :is(p, span) {
    color: var(--baseLight-color);
}

.hero--content__title ul li span {
    font-size: 28px;
    font-weight: 400;
    line-height: var(--line-height120);
}

.hero--content__title ul li p {
    font-size: var(--text-base);
    font-weight: 300;
    opacity: 0.6;
    line-height: var(--line-height150);
}

.hero--content__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.hero--content__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
	padding: 0.75rem;
/* 	height: 340px; */
	background: rgba(255, 255, 255, 0.05);
    
    border-radius: var(--border-radius-16);
    backdrop-filter: blur(25px);
	overflow: hidden;
}

.hero--content__box > picture{
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 22px);
	height: calc(100% - 22px);
/*     width: 96%;
    height: 93%; */
    object-fit: cover;
	border-radius: var(--border-radius-16);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero--content__box > picture img{
	width: 100%;
    height: 100%;
	object-fit: cover;
	transition: all 0.5s ease;
}

.hero--content__box:hover > picture img{
	transform: scale(1.03);
}

.hero--card {
	padding: 1rem;
    border-radius: var(--border-radius-16);
    display: flex;
    flex-direction: column;
    gap: 1rem;
	overflow: hidden;
    box-sizing: border-box;
    overflow: hidden;
	background-size: cover;
	position: relative;
	background-repeat: no-repeat;
}

.hero--card:before{
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}

.hero--card__content {
	row-gap: 2rem;
/* 	margin-top: 3rem; */
	    height: 100%;
	    width: 518px;
	min-height: 340px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.hero--card__btn{
	display: flex;
	align-items: center;
	position: relative;
	top: 1rem;
	left: -100%;
	transition: all 0.5s ease;
	color: var(--baseLight-color);
}

.hero--content__box:hover .hero--card__btn{
	left: 0;
}

.hero--card__btn > img{
	width: 22px;
}

.hero--card__content > div{
	height: 100%;
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
}

.hero--card__content > div h3,
.hero--card__content > div p{
	text-align: left;
}

.hero--card__content > div p{
	margin-block-start: 1rem;
	font-size: var(--text-sm);
	line-height: var(--line-height150)
}

.hero--card__content > ul{
	display: flex;
    column-gap: 0.5rem;
	justify-content: space-between;
}

.hero--card__content > ul li{
	width: stretch;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 0.75rem;
	backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
}

.hero--card__content > ul li div{
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
}

.hero--card__content > ul li p{
	color: rgba(255, 255, 255, 0.7);
	margin-block-start: 0.5rem;
	font-size: var(--text-sm);
}

/* hero search */
.hero--listing__search  {
    width: 100%;
    display: block;
}

.hero--listing__search{
	position: absolute;
	bottom: 3rem;
}
/*********************
END: HERO
*********************/

/*********************
START: ABOUT
*********************/
.about {
    padding: 5rem 0;
    overflow: hidden;
}


.about--head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.about--head__content {
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.faq--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-start: 5rem;
}

.faq--img {
    width: 40%;
}

.faq--img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 556 / 485;
    border-radius: var(--border-radius-12);
}

.faq--column {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq--intro {
    margin-block-end: 1.5rem;
}

.faq--intro p:last-child {
    margin-block-end: 0;
}

ul.faq--list {
    width: 100%;
}

ul.faq--list li {
    width: 100%;
    transition: all 0.3s ease;
    padding-block: 2.5rem;
}


ul.faq--list li:not(:last-child) {
    margin-block-end: 1rem;
    border-bottom: 1px solid var(--border-color);
}

ul.faq--list li.active {
    border-radius: var(--border-radius-20);
}

ul.faq--list li .accordion {
    display: flex;
    cursor: pointer;
    align-items: center;
    transition: all 0.3s ease;
    justify-content: space-between;
}

ul.faq--list li .accordion h5 {
    font-weight: 500;
    width: calc(100% - 60px);
    transition: all 0.1s ease;
    margin-block: 0;
    font-size: var(--text-lg);
    color: var(--gray-primary);
    line-height: var(--line-height150);
}

ul.faq--list li .accordion .icon--container {
    background-color: var(--baseLight-color);
    border-radius: 50%;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid var(--baseLight-color);
}

ul.faq--list li .accordion.open .icon--container {
    background-color: transparent;
    border: 1px solid var(--border-color);
}

ul.faq--list li .accordion .icon {
    display: block;
    height: 1px;
    width: 10px;
    position: relative;
}

ul.faq--list li .accordion .icon:before,
ul.faq--list li .accordion .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 3px;
    transition: all 0.3s ease;
    background: var(--gray-primary);
}

ul.faq--list li .accordion .icon:before {
    top: 0px;
}

ul.faq--list li .accordion .icon::after {
    top: 0px;
    transform: rotate(90deg);
}

ul.faq--list li .accordion.open .icon::after {
    transform: rotate(0deg);
}


ul.faq--list li .panel {
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease;
}

ul.faq--list li .panel p,
ul.faq--list li .panel .faq--answer p {
    font-weight: 400;
    margin-block-start: 1rem;
    margin-inline: 3.75rem;
    color: var(--gray-secondary);
	line-height: var(--line-height150);
}

ul.faq--list li .panel .faq--answer > p:first-child {
    margin-block-start: 1rem;
}

/*********************
END: ABOUT
*********************/


/*********************
START: PROPERTIES
*********************/
.properties {
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
    overflow: hidden;
}

.properties--head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.properties--head__content {
    max-width: 56.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.listing-card .listing-card__properties .listing-card__attributes-splitter:last-child{
	display: none;
}

.listing-card .listing-card__properties .listing-card__address{
	border-block-start: 1px solid var(--border-color);
    padding-block-start: 0.5rem;
}
/*********************
END: PROPERTIES
*********************/
.agents--head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 970px;
    margin-inline: auto;
    row-gap: 1.25rem;
    margin-block-end: 2.5rem;
}

.agents--list {
    padding-block: 5rem;
    background-color: #222222;
}

.agents--list a.btn {
    color: var(--baseLight-color);
    background-color: var(--gray-secondary);
    margin-block-start: 5rem;
    width: max-content;
    margin-inline: auto;
	border: 1px solid transparent;
}

.agents--list a.btn:hover{
	background-color: transparent;
	border: 1px solid var(--gray-secondary);
}

.agents--list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.agents--list ul li {
    flex-basis: calc(25% - 24px);
    margin: 12px;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-12);
}

.agents--list ul li picture img {
    width: 100%;
    border-radius: 8px;
    height: auto;
    aspect-ratio: 4/4.5;
    object-fit: cover;
    margin-block-end: 1.25rem;
    mix-blend-mode: luminosity;
    transition: all 0.3s ease;
}

.agents--list ul li:hover picture img {
    mix-blend-mode: unset;
}

.agents--list ul li p {
    color: var(--baseLight-color);
    font-size: var(--text-lg);
    font-style: normal;
    font-weight: 400;
    margin-block-end: 0.5rem;
    line-height: var(--line-height120);
}

.agents--list ul li span {
    color: var(--baseLight-color);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height120);
}

/*********************
START: GUID
*********************/
.guidText {
    padding-block: 5rem;
    background-color: var(--baseLight-color);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom: 1px solid var(--border-color);
}

.guidText--content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.guidText--content p {
    font-size: var(--text-3xl);
    max-width: 1010px;
	font-weight: 300;
}

.guidText--content picture img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 437 / 275;
    border-radius: 8px;
}

.guidText--content picture:first-child img {
    margin-inline-start: auto;
}

/*********************
END: GUID
*********************/

/*********************
START: NEIGHBORHOOD
*********************/

.neighborhood {
    padding: 5rem 0;
}

.neighborhood--layout {
    display: flex;
    flex-direction: column;
    gap: 3.4375rem;
}

.neighborhood--head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.neighborhood--head__content {
    max-width: 56.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.neighborhood--gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.neighborhood--row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}


.neighborhood--item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--border-radius-4);
}

.neighborhood--item::after {
    content: unset;
    position: absolute;
    z-index: 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    transition: all 0.3s ease;
    border-radius: var(--border-radius-4);
}

.neighborhood--item:hover::after {
    content: "";
}

.neighborhood--item .pin {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    z-index: 1;
    justify-content: flex-start;
}

.neighborhood--item .pin h4 {
    font-weight: 600;
	text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.neighborhood--item__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 4/3;
}

.neighborhood--item__label {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    z-index: 1;
    padding: 1.25rem 1rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 92%;
    backdrop-filter: blur(25px);
    border-radius: var(--border-radius-16);
    -webkit-backdrop-filter: blur(25px);
    opacity: 0;
    transition: all 0.3s ease;
}

.neighborhood--item:hover .neighborhood--item__label {
    opacity: 1;
    bottom: 2rem;
}

.neighborhood--item__label>div.btn {
    max-width: unset;
    width: max-content;
    margin-inline: auto 0;
    background-color: var(--baseLight-color);
    color: var(--gray-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.neighborhood--item__label>div.btn img {
    filter: brightness(0.1);
    width: 16px;
    height: 16px;
}

/*********************
END: NEIGHBORHOOD
*********************/


/*********************
START: BLOG
*********************/
section.blog {
    padding-block: 10rem;
    background-color: #222222;
    border-radius: var(--border-radius-12);
}

section.blog .blog--head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    flex-wrap: wrap;
}

section.blog .blog--head a {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}

section.blog ul {
    display: flex;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 2rem;
    flex-wrap: wrap;
    margin-block-start: 3rem;
}

section.blog ul li {
    width: 32%;
    position: relative;
}

section.blog ul li p {
    opacity: 0.8;
}

section.blog ul li picture {
    position: relative;
    display: block;
    margin-block-end: 1rem;
}

section.blog ul li picture::before {
    position: absolute;
    content: unset;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--border-radius-12);
    background-color: rgba(0, 0, 0, 0.4);
}

section.blog ul li:hover picture::before {
    content: "";
}

section.blog ul li picture img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: all 0.5s;
    border-radius: var(--border-radius-12);
}

section.blog ul li a.btn {
    position: absolute;
    top: 55%;
    left: 50%;
    opacity: 0;
    color: var(--baseLight-color);
    transform: translate(-50%, -50%);
}

section.blog ul li:hover a.btn {
    top: 46%;
    opacity: 1;
}

/*********************
END: BLOG
*********************/


/*********************
START: TESTIMONIALS
*********************/
.testimonials {
    padding-block: 10rem;
}

.testimonials--head {
    max-width: 970px;
    margin-inline: auto;
}

.testimonials--head h3 {
    margin-block-end: 1rem;
}

.testimonials--head h3 br{
	display: none;
}

/* SDK testimonial cards ([rch_testimonials]): 3-col grid, light rounded boxes */
.testimonials .testimonials__list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    margin-block-start: 5rem;
}

.testimonials .testimonial-card {
    background: var(--baseLight-color) !important;
    border-radius: var(--border-radius-12);
    color: var(--gray-secondary);
}

/* keep the star rating gold */
.testimonials .testimonial-card .testimonial-card__rating,
.testimonials .testimonial-card .testimonial-card__rating * {
    color: #FFD700 !important;
}

@media screen and (max-width: 992px) {
    .testimonials .testimonials__list { grid-template-columns: repeat(2, 1fr) !important; }
}

@media screen and (max-width: 576px) {
    .testimonials .testimonials__list { grid-template-columns: 1fr !important; }
}

/*********************
END: TESTIMONIALS
*********************/


/*********************
START: MEDIA
*********************/
@media screen and (min-width: 1440px) {

    /* hero */
    .hero--content h1 {
        font-size: 96px;
    }

    .hero--content__title ul li span {
        font-size: 28px;
    }
}

@media screen and (min-width: 1320px) and (max-width: 1439px) {

    /* hero */
    .hero--content h1 {
        font-size: 90px;
    }

    .hero--content__title ul li span {
        font-size: var(--text-2xl);
    }

}

@media screen and (max-width: 1319px) {

    /* hero */
    .hero--content h1 {
        font-size: 80px;
    }

    .hero--content__title ul li span {
        font-size: var(--text-2xl);
    }

}

@media screen and (max-width: 1200px) {

    /* hero */
    .hero--content h1 {
        font-size: var(--text-8xl);
    }

    .hero--content__title ul {
        column-gap: 2rem;
    }

    /* about */


    /* properties */
    .properties {
        padding: 8rem 0;
        gap: 3rem;
    }

    .properties--head .btn {
        width: 11.5rem;
    }


    /* neighborhood */
    .neighborhood {
        padding: 4rem 0;
    }

    .neighborhood--layout {
        gap: 3rem;
    }

    .neighborhood--head__content {
        max-width: 44rem;
    }

    .neighborhood--item {
        min-height: 20rem;
    }

    .neighborhood--item__label {
        font-size: var(--text-xl);
    }
}

@media screen and (max-width: 992px) {
	.hero--listing__search {
		position: relative;
		bottom: 0;
	}

    /* hero */
	.hero--content{
		flex-direction: column;
		height: auto;
		row-gap: 2rem;
    	padding-block: 7rem; 
		justify-content: unset;
	}
    .hero--content h1 {
        font-size: var(--text-7xl);
    }

    .hero--content__title {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .hero--content h1 {
        text-align: center;
    }

    .hero--content__title ul li {
        align-items: center;
    }

    .hero--content__title ul li span {
        font-size: var(--text-xl);
    }

    .hero--content__box {
        display: none;
    }
	
	.property-search-form input[type=text]{
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

    /* about */
    .about--head {
        flex-direction: column;
        align-items: flex-start;
    }

    .about--head__content {
        max-width: unset;
    }

    .faq--content {
        flex-direction: column;
        gap: 2rem;
    }

    .faq--column {
        width: 100%;
    }

    ul.faq--list {
        width: 100%;
    }

    .faq--img {
        width: 50%;
    }


    /* properties */
    .properties {
        padding: 6rem 0;
        gap: 2.5rem;
    }

    .properties--head {
        flex-direction: column;
        align-items: flex-start;
    }

    .properties--head .btn {
        width: 100%;
        max-width: 13.25rem;
    }

    /* agents */
    .agents--list ul li {
        flex-basis: calc(33.33% - 24px);
    }

    /* neighborhood */
    .neighborhood {
        padding: 3.5rem 0;
    }

    .neighborhood--layout {
        gap: 2.5rem;
    }

    .neighborhood--head {
        flex-direction: column;
        align-items: flex-start;
    }

    .neighborhood--head .btn {
        width: 100%;
        max-width: 13.25rem;
    }

    .neighborhood--row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .neighborhood--row .neighborhood--item {
        grid-column: span 1;
    }

    .neighborhood--row .neighborhood--item:nth-child(3) {
        grid-column: span 2;
    }

    .neighborhood--row .neighborhood--item:nth-child(4),
    .neighborhood--row .neighborhood--item:nth-child(5) {
        grid-column: span 1;
    }

    .neighborhood--item {
        min-height: 17.5rem;
    }

    .neighborhood--item__label {
        left: 1rem;
        bottom: 0.875rem;
        max-width: 12.5rem;
        font-size: var(--text-lg);
    }
}

@media screen and (max-width: 768px) {
    /* hero */
    .hero--content h1 {
        font-size: var(--text-6xl);
    }

    .hero--content__title ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.5rem;
    }

    /* about */
    .faq--img {
        width: 75%;
    }


    /* properties */
    .properties {
        padding: 5rem 0;
    }

    /* agents */
    .agents--head {
        row-gap: 2rem;
        flex-direction: column;
    }

    .agents--head h3,
    .agents--head p {
        width: 100%;
    }

    /* guidText */
    .guidText p {
        font-size: var(--text-2xl);
    }

    /* blog */
    section.blog ul li {
        width: 48.5%;
    }
	
	.neighborhood--item .pin {
		top: 1.5rem;
		left: 1.5rem; 
	}
}

@media screen and (max-width: 576px) {

    /* hero */
    .hero--content h1 {
        font-size: var(--text-5xl);
    }

    .hero--content__title ul li span {
        font-size: var(--text-lg);
    }

    /* about */
    .faq--img {
        width: 85%;
    }

    /* properties */
    .properties {
        padding: 4rem 0;
        gap: 2rem;
    }

    /* agents */
    .agents--list ul li {
        flex-basis: calc(50% - 24px);
    }

    /* neighborhood */
    .neighborhood {
        padding: 3rem 0;
    }

    .neighborhood--layout {
        gap: 2rem;
    }

    .neighborhood--row {
        grid-template-columns: minmax(0, 1fr);
    }

    .neighborhood--row .neighborhood--item,
    .neighborhood--row .neighborhood--item:nth-child(3),
    .neighborhood--row .neighborhood--item:nth-child(4),
    .neighborhood--row .neighborhood--item:nth-child(5) {
        grid-column: span 1;
    }

    .neighborhood--item {
        min-height: 16rem;
    }

    .neighborhood--item__label {
        max-width: 100%;
    }

    .guidText p {
        font-size: var(--text-xl);
    }

    /* blog */
    section.blog ul li {
        width: 100%;
    }
}

@media screen and (max-width: 425px) {
    .faq--img {
        width: 100%;
    }

    /* agents */
    .agents--list ul li {
        flex-basis: calc(100% - 24px);
    }
}

@media screen and (max-width: 375px) {

    /* hero */
    .hero--content h1 {
        font-size: var(--text-4xl);
    }
}

/*********************
END: MEDIA
*********************/
/* neighborhood cards: dark fade behind the name so it reads on bright photos */
.neighborhood--item > a {
    display: block;
}

.neighborhood--item > a::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 55%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(21, 20, 16, 0.72) 0%, rgba(21, 20, 16, 0.38) 45%, rgba(21, 20, 16, 0) 100%);
    border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
}

.neighborhood--item .pin h4 {
    font-size: var(--text-2xl);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.neighborhood--item .pin > img {
    width: 22px;
    height: 22px;
}

@media screen and (max-width: 576px) {
    .neighborhood--item .pin h4 {
        font-size: var(--text-xl);
    }
}

/* hero video sits in its own clipped layer (the scroll-depth zoom must not widen the page,
   and the hero itself cannot clip: the search dropdowns open past its bottom edge) */
.hero--media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

/* tablet/phone hero: the title is centred here but the intro stayed left-aligned in grey
   (#848482) on the photo — centre it, light type, and a deeper veil over the top half */
@media screen and (max-width: 992px) {
    .hero::before {
        background: linear-gradient(to bottom, rgba(21, 20, 16, 0.55) 0%, rgba(21, 20, 16, 0.5) 45%, rgba(21, 20, 16, 0.95) 100%);
    }

    .hero--content__title p.text--small {
        text-align: center;
        color: rgba(250, 248, 244, 0.86);
    }
}