@layer component {
	.location-information{
		--row-gap: 4.375rem;

		background-color: hsl(var(--clr-cream));
		padding-block-start: 4.6875rem;
	}

	.location-information + section.component__grid-layout{
		padding-block-end: 8.5rem;
	}

	.location-information + section.component__grid-layout h3{
		font-family: var(--ff-accent);
	}

	@media(min-width: 768px){
		.location-information .card{
			grid-column: span 5;
		}
	}

	@media(min-width: 1200px){
		.location-information .card{
			grid-column-start: 9;
			grid-column-end: 13;
		}
	}

	.location-information .map-container{
		height: 415px;
		margin-bottom: 2rem;
	}

	.location-information .location-address{
		margin-bottom: 1rem;
	}

	.location-information .map-container img{
		border: none;
	}

	.location-information h1,
	.location-information h2{
		text-align: center;
		font-size: var(--fs-step-3);
	}

	.location-information h3{
		font-family: var(--ff-accent);
		margin-block-end: 1rem;
	}

	.location-information .location-image{
		margin-bottom: 3em;
	}

	.location-information .location-content > div{
		display: flex;
		gap: 1rem;
		grid-column: span 6;
	}

	@media(min-width: 768px){
		.location-information .location-content > div{
			flex-direction: column;
		}
	}

	.location-information .location-content > div > *{
		width: 100%;
	}

	.location-information .location-content a{
		color: black;
		text-decoration: none;
	}

	.location-information .service a:after{
		content: '\f054';
		font-family: FontAwesome;
		font-size: .9rem;
		margin-left: 0.5em;
	}

	.location-information .hours{
		display: grid;
		grid-template-areas: "x x";
		grid-auto-columns: 1fr;
	}

	@media(min-width: 768px){
		.location-information .hours{
			grid-auto-columns: 1fr 2fr;
		}
	}
}