// Banners

// # Contents
// 1. Banner
// 1.1) Banner Base
// 1.2) Banner Layer Positions
// 1.3) Banner Layer Vertical
// 2. Banner Property
// 2.1) Banner Min Height
// 3. Responsive

// # Variables
@include set-default(
	(
		banner: (
			layer: (
				top: 7%,
				left: 6%,
				right: 6%,
				bottom: 5%
			)
		)
	)
);

// 1. Banner

// 1.1) Banner Base
.banner {
	position: relative;
	font-size: 1.6rem;

	figure {
		margin: 0;
		&::after {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: transparent;
			transition: all 0.3s;
			z-index: 1;
			transition: background-color .3s ease;
			content: '';
		}
	}

	&:hover {
		figure::after {
			background-color:  rgba(27,27,23,0.15);
		}
	}

	img {
		width: 100%;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1;
	}

	.container:not(.banner-content)  {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
}

.ibanner {
	font-size: 10px;
}

aside .banner {
	font-size: 1.6rem;
}

.banner-layer {
	position: absolute;
	z-index: 3;
	@include css(left, banner, layer, left);
	@include css(right, banner, layer, right);
}

.banner-content {
	position: relative;
}

// 1.2) Banner Layer Positions
.banner-layer-top {
	@include css(top, banner, layer, top);
}

.banner-layer-bottom {
	@include css(bottom, banner, layer, bottom);
}

.banner-layer-space {
	left: 0;
	right: 0;
	padding: 1em 1.5625em;
}

.banner-layer-left {
	right: auto;
}

.banner-layer-right {
	left: auto;
}

.banner-layer-middle {
	top: 50%;
	transform: translateY(-50%);
}

// 3. Responsive

@include mq(xl, max) {
	.banner {
		font-size: 1.4rem;
	}

	.banner.banner2 {
		.banner-layer > .row {
			margin-bottom: 2.3rem;
		}
	}

	.ibanner {
		font-size: 1rem;
	}
}

@include mq(md, max) {
	.banner-md-vw-small {
		font-size: 1.8vw;
	}

	.banner-md-vw {
		font-size: 2.3vw;
	}

	.banner-md-vw-large {
		font-size: 3vw;
	}
}

@include mq(sm, max) {
	.banner-md-vw-small {
		font-size: 2.3vw;
	}

	.banner-sm-vw {
		font-size: 3vw;
	}

	.banner-sm-vw-large {
		font-size: 4vw;
	}
}