@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-basic-hero {
	position: relative;
	background: $grey-primary;
	min-height: rem-calc(648);
	display: flex;
	align-items: center;
	
	&__wrapper {
		padding: 4rem 0;
		position: relative;
		z-index: 5;
		
		.overline{
            margin-bottom: rem-calc(16);
        }

		.heading {
			@include fluid-type(24, 64, 375, $max-container-size);
			margin-bottom: 1rem;			
		}

		ol {
			li {

				margin-bottom: 1rem;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
		.btn{
			width: 100%;
			color: $white;	

			@include bp($md){
				width: auto;
			}

			&--tertiary{
				&::after{
					background-image: url("data:image/svg+xml,%3Csvg fill='none' width='14' height='13' xmlns='http://www.w3.org/2000/svg' viewBox='-0.17 0.52 13.87 12.58'%3E%3Cpath d='M0.334961 6.80981H13.2057' stroke='%23ffffff'%3E%3C/path%3E%3Cpath d='M7.47852 1.01758L13.2036 6.80911L7.47852 12.6013' stroke='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
				}
			}
		}
	}
	&__image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	&.content-alignment-left {
		text-align: left;

		.block-basic-hero__wrapper {
			max-width: rem-calc(610);
		}
	}
	&.content-alignment-right {
		text-align: right;

		.block-basic-hero__wrapper {
			max-width: rem-calc(610);
		}
		.container {
			display: flex;
			justify-content: flex-end;
		}
		.btn {
			margin-right: 0;
			margin-left: 1rem;
		}
	}
	&.content-alignment-center {
		text-align: center;

		.btn {
			margin-right: 0.5rem;
			margin-left: 0.5rem;
		}
		.block-basic-hero__wrapper {
			max-width: rem-calc(610);
			margin: 0 auto;
		}
	}
	&.has-img {
		&:after {
			content: "";
			z-index: 2;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: rem-calc(375);
			background: rgb(0,0,0);
			background: linear-gradient(180deg,  rgba(0,0,0,0) 0.09%, rgba(0,0,0,1) 99.75%);
		}
		&:before {
			content: "";
			z-index: 2;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: 1431px;
			background: rgb(0,0,0);
			background: linear-gradient(90.1deg, #000000 0.09%, rgba(0, 0, 0, 0) 99.75%);
		}
		h1,
		h2,
		h3,
		h4,
		p {
			color: $white;
		}
	}
}