.locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;

	.location {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 1rem;
		background-color: var(--color-lightest-grey);
		border-radius: 0.5rem;
		gap: 2rem;

		.location-intro {
			border-bottom: 4px solid var(--color-black);
			padding-bottom: 0.75rem;

			.location-type {
				display:flex; 
				align-items: center;
				justify-content: flex-start;
				gap: 0.5rem;
				font-size: 1.125rem;
				font-weight: bold;
				text-transform: uppercase;
				color: var(--color-black);

				svg {
					width: 40px;
					height: 36px;
				}
			}
		}
		h2 {
			font-size: 1.5rem;
			text-transform: uppercase;
		}
		h3 {
			font-size: 1.125rem;
			text-transform: uppercase;
			color: var(--color-black);
			padding-bottom: 0;
		}
		.new-location {
			background-color: var(--color-black);
			position: absolute;
			top: 0;
			right: 0;
			height: 4rem;
			width: 4.5rem;
			border-radius: 0 0.5rem 0 0.5rem;
			color: var(--color-white);
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: uppercase;
			font-weight: 400;
			font-size: 1.25rem;
		}
		.location-details {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			height: 100%;
			flex: 0;

			.detail {
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				gap: 1rem;
				font-size: 1rem;
				background-color: var(--color-white);
				border-radius: 0.25rem;
				padding: 0.75rem 0.5rem;
				color: var(--color-black);

				svg {
					width: 24px;
					height: 24px;
					color: var(--color-black);
				}
				svg.map-marker {
					width: 22px;
					height: 40px;
				}

			}
		}
		.location-details.services {
			min-height:148px
		}		
		
		.location-cta {
			display: flex;
			gap: 1rem;
			a {
				background-color: var(--color-primary);
				color: var(--color-white);
				padding: 0.75rem 1.5rem;
				border-radius: 0.25rem;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: 400;
				font-size: 1rem;
				flex: 1;
				text-align: center;
			}
			a:hover {
				background-color: var(--color-primary-dark);
			}
		}

	}
}

.store-details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;

	:nth-of-type(3) {
    			grid-column: 1 / -1; /* span full row */
  			}
	.store-details {
		background-color: var(--color-lightest-grey);
		border-radius: 0.5rem;
		padding: 0.5rem;
		display: flex;
		flex-direction: column;

		.store-details-item {
			background-color: var(--color-white);
			border-radius: 0.25rem;
			padding: 0.75rem;
			display: flex;
			align-items: center;
			gap: 1rem;
			height: 100%;

			svg {
				height: 24px;
				width: 24px;
				color: var(--color-black);
			}

			h3 {
				text-transform: uppercase;
			}
		}
	}
}

.breadcrumb.locations {
	background-color: var(--color-lightest-grey);

	ul {
		margin: 0;
	}
}

@media (max-width: 600px) {
	.locations-grid .location {
		gap: 1rem;
	}
	.locations-grid .location .location-details.services {
		min-height: auto;
	}
	.store-details-grid {
		grid-template-columns: 1fr;
	}
}