.introduction {
	position: relative;
	min-height: 600px;
	background-color: var(--grey);
}

.introduction__image-wrapper {
	position: absolute;
	left: 0;
	top: 0;
}

.introduction__image {
	width: 100vw;
	height: 600px;
	background-image: url('../../images/sofia.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	transform: scaleX(-1);
}

.introduction-banner {
	position: absolute;
	left: calc(var(--blank-space-width) + var(--gap));
	bottom: 80px;
	width: calc(100% - var(--blank-space-width) * 2 - var(--gap) * 2);
	max-width: 800px;
}

.introduction-banner__copy {
	color: var(--white);
	font-size: 16pt;
	font-weight: 200;
	text-shadow: 1px 1px 3px var(--black-transparent), -1px -1px 3px var(--black-transparent);
	padding-bottom: 65px;
}

.introduction__button {
	position: absolute;
	bottom: 50px;
	left: calc(var(--blank-space-width) + var(--gap));
	padding: 12px;
	padding-left: 24px;
	padding-right: 24px;
	background-color: var(--primary);
	color: var(--white);
	text-decoration: none;
	text-align: center;
	transition: background-color 0.2s;
	border-radius: 20px;
	font-weight: 600;
	transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	will-change: transform;
}

.introduction__button:hover {
	background-color: var(--white);
	color: var(--primary);
	box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
	transform: translateY(-3px);
}

.introduction__contact {
	left: calc(var(--blank-space-width) + var(--gap) + 160px);
}

@media (min-width: 1024px) {
	.introduction__image {
		background-position-y: -8vw;
	}
}

@media (min-width: 1200px) {
	.introduction__image {
		background-position-y: -16vw;
	}

	.introduction-banner {
		left: 104px;
	}
}

@media (max-width: 768px) {
	.introduction-banner__copy {
		font-size: 0.9rem;
	}
}

@media (max-width: 768px) {
	.introduction__button {
		font-size: 0.95rem;
		padding: 14px 18px;
	}
}