@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

@keyframes kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}

.shop-hero {
	position: relative;
	padding-top: 28rem;
	padding-bottom: 2rem;

	@include media-breakpoint-down(sm) {
		padding-top: 20rem;
		padding-bottom: 0;
	}
	.container {
		position: relative;
		z-index: 3;
	}
	.breadcrumbs {
		font-weight: bold;
		display: flex;
		align-items: center;
		margin: 0;
		position: relative;
		z-index: 5;
		background-color: #fff;
		padding: 0.75rem 1rem 0 1rem;
		width: 100%;

		img {
			margin-right: 0.375rem;
		}
		a {
			color: $body;

			&:hover {
				color: $red;
			}
		}
		.separator {
			color: $red;
		}
	}
	.hero-content {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;

		h1 {
			color: $body;
			margin-top: -2px;

			.cherry {
				color: $red;
			}
			span {
				display: inline-block;
				padding: 0.25rem 1rem 0.75rem 1rem;
				background-color: #fff;

				&:first-child {
					width: 100%;
					margin-bottom: -2px;
				}
				&:last-child {
					padding-top: 0;
				}
			}
		}
	}
	.hero-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			animation: kenburns 5s ease-in-out forwards;
		}
	}
}