// =============================================================================
// :: Settings
// =============================================================================
$curveHeight: 8rem;

// =============================================================================
// :: Section
// =============================================================================
.l-section {
	padding: 5rem 0;
}

// =============================================================================
// :: Elements
// =============================================================================
.l-section__header {
	margin-bottom: 3rem;

	@include respond-at(get-breakpoint("desktop")) {
		margin-bottom: 5rem;
	}
}

.l-section__content {

	+ .l-section__content {
		margin-top: 5rem;
	}
}

.l-section__footer {
	margin-top: 4rem;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.l-section--large {
	padding: 12rem 0;
}

.l-section--medium {
	padding: 8rem 0;
}

.l-section--background-pink {
	background-color: $background-color-pink;
}

.l-section--background-green {
	background-color: $background-color-green;
}

.l-section--background-light {
	background-color: $background-color-lighter;
}

.l-section--with-curve {
	position: absolute;
	// the + 0.1rem is to make sure it doesn't leave a gap
	top: calc(#{-$curveHeight} + 0.2rem);

	width: 100%;
	height: $curveHeight;

	background-image: url("/assets/images/general/background/curve.svg");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: cover;
}

.l-section--with-shapes {
	position: relative;

	overflow: hidden;

	&::before,
	&::after {
		content: "";

		position: absolute;
		z-index: $z-index-pit;
	}

	&::before {
		left: 0;
		bottom: 0;

		width: 20rem;
		height: 22rem;

		background-color: $background-color-medium;
		border: none;
		border-top-right-radius: 100%;
	}

	&::after {
		top: -15rem;
		right: -12rem;

		width: 40rem;
		height: 40rem;

		background-image: url("/assets/images/general/background/bg-shape--flower.svg");
	}
}

.l-section--background-right {
	position: relative;

	&::after {
		content: "";

		position: absolute;
		top: 60%;
		right: 0;
		z-index: $z-index-pit;

		width: 60%;
		height: 60%;

		background-color: $background-color-green;
		background-image: url("/assets/images/general/background/bg-overlay.svg");
		border-top-left-radius: $border-radius-2x-small;
		border-bottom-left-radius: $border-radius-2x-small;
		background-position: center -50%;
		background-repeat: no-repeat;

		transform: translateY(-50%);
	}

	@include respond-at(get-breakpoint("desktop")) {

		&::after {
			top: 50%;
			right: 0;

			height: 70%;
		}
	}
}