#hero {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	position: relative;

	&::before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background-image: url("../../images/r.svg");
		background-size: 100% 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		opacity: 0.1;
		z-index: -5;
	}
	& > .hero-content {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		flex-grow: 1;
		
		& > .hero-content-tagline {
			font-size: 0.8rem;
			font-weight: 600;
			color: var(--color-primary);
			text-transform: uppercase;
			letter-spacing: 0.2em;
			border: 0.1rem solid var(--color-primary);
			padding: 0.4rem 1rem;
			border-radius: 0.5rem;
			width: fit-content;
			background-color: hsla(var(--hue-primary), 90%, 55%, 0.1);
		}
		& > .hero-content-title {
			font-size: 3.5rem;
			font-weight: bold;
			line-height: 1.5;
			word-spacing: 0.1em;
			max-width: 500px;
			width: 100%;
		}
		& > .hero-content-subtitle {
			color: var(--color-text_medium);
			font-size: 1.25rem;
			line-height: 1.5;
			word-spacing: 0.2em;
		}
		& > .hero-content-button {
			display: inline-block;
			margin-top: 3.5rem !important;
		}
	}
	& > .hero-visual {
		flex-grow: 1;
		min-width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		aspect-ratio: 1/1;
		border-radius: 50%;
		overflow: hidden;

		border: 1rem solid hsl(var(--hue-primary), 20%, 7%);
		/* box-shadow: 0 4rem 3rem 0rem hsl(var(--hue-primary), 100%, 5%); */
		& > img {
			width: 100%;
			aspect-ratio: 1/1;
			height: auto;
			object-fit: contain;
			transform: translateY(4rem);
		}
	}
}

/*---------------- hero image shape -----------------*/
.hero-image_shape {
	border-radius: 50%;
	/* box-shadow: 0 2rem 5rem 0.5rem hsl(var(--hue-primary), 100%, 8%); */
	& > img {
		filter: drop-shadow(4rem 3rem 0.5rem var(--color-bg));
	}
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 100%;
		width: 100%;
		z-index: -2;
		border-radius: 50%;
		background-color: color-mix(in srgb, transparent, var(--color-accent) 35%);

		pointer-events: none;
		background: var(--linear-gradient_card);

		border: 3rem solid hsl(var(--hue-primary), 20%, 10%);
	}
}

/*---------------- media queries -----------------*/

@media (max-width: 768px) {
	.hero {
		flex-direction: column;
		padding-top: 2rem;
		& > .hero-content {
			max-width: 600px;
			align-items: center;
			margin-bottom: 3rem;
			& > .hero-content-title {
				text-align: center;
			}
			& > .hero-content-subtitle {
				text-align: center;
			}
		}
	}
}