@import "modules/design_system.css";
@import "modules/wedge_bg.css";
@import "modules/columns.css";

.hero {
	h1 {
		margin-bottom: .4em;
	}
}

.store_showroom {
	padding: var(--main-content-padding) 0;

	.store_category {
		max-width: 2000px;
		margin: 0 auto;
		text-align: left;
		padding: 0 var(--gallery-half-gutter-l);
		margin-bottom: 3rem;
		
		h3, .intro {
			margin-left: var(--gallery-gutter-l);
		}
		
		.intro {
			margin-bottom: 1em;
		}
	}
	
	.product_link {
		border: solid 8px #fff;
		box-shadow: 0 10px 25px rgba(0,0,0,.15);
		cursor: pointer;
		transition: transform .15s linear;
		will-change: auto;
		overflow: hidden;
		text-decoration: none;
		color: #000;
		background-color: #fff;
		
		&:hover {
			transform: scale(1.045);
		
			.arrow_link {
				text-decoration: underline;
			}
		}
		
		img {
			width: 100%;
			border: solid 1px #f1f1f1;
		}
		
		.product_text {
			line-height: 1.4;
			text-align: left;
			padding: .75em;
			overflow: auto;
			
			h3 {
				line-height: 1.1;
				font-size: .9rem;
				margin: .2em 0 .3em;
			}
			
			.arrow_link {
				font-size: .8em;
				font-weight: 400;
				margin-top: .3em;
				text-transform: uppercase;
				float: left;
			}
			
			.price {
				float: right;
			}
		}
	}
}

@media screen and (max-width: 1150px) {
	.store_showroom {
		padding: 3rem 0;
	
		.store_category {
			padding: 0 var(--gallery-half-gutter-m);
			
			h3, .intro {
				margin-left: var(--gallery-gutter-m);
			}
		}
	}
}

@media screen and (max-width: 750px) {
	.hero {
		h1 {
			font-size: 1.9em;
		}
	}
	
	.store_showroom .store_category {
		padding: 0;
	}	
}