@layer components {
	.card-container{
		--row-gap: 4.375rem;
		background-color: hsl(var(--clr-cream));
		background-image: url(/images/swirlies-tan-cropped.png);
		background-position: center 100%;
		background-size: 100%;
		padding-block-end: 10rem;
	}

	.card-container > h2{
		text-align: center;
	}

	.card-container[style*="#24687c"]{
		padding-block-start: 4.375rem;
		--row-gap: 2rem;
	}

	.card-container[style*="#24687c"] > h2{
		color: white;
	}

	.card-container h2 + .card-container-copy{
		margin-top: 0;
	}

	.card-container .card-container-copy{
		margin-top: 3rem;
	}

	.card-container h2 + .card-container-copy{
		margin-top: 0;
	}

	.card {
		--column-gap: 1.125rem;
		--top-padding: var(--column-gap);
		--right-padding: var(--column-gap);
		--bottom-padding: var(--column-gap);
		--left-padding: var(--column-gap);

		box-shadow: -2px 2px 12px rgba(0,0,0, .05);
		display: grid;
		grid-template-columns:
			[full-start] var(--left-padding)
			[main-start] auto
			[main-end] var(--right-padding)
			[full-end];
		grid-auto-rows: minmax(max-content, 0);
		height: 100%;
		background-color: white;
	}

	.rte-content.card{
		margin-block: 4rem;
		height: auto;
	}

	.card:before,
	.card:after {
		content: '';
		grid-column: main;
	}

	.card:before {
		grid-row: 1;
		height: var(--top-padding);
	}

	.card:after {
		height: var(--bottom-padding);
	}

	.card.no-padding:before,
	.card.no-padding:after{
		content: none;
	}

	.card > * {
		grid-column: main;
	}

	.card > .poster {
		width: 100%;
	}

	.card > .poster.full-bleed {
		grid-column: full;
		grid-row: 1;
	}

	.card > .poster.left-bleed {
		grid-column-start: full-start;
		grid-column-end: full-end;
		align-items: center;
		background-image: url(/images/card-wave.png);
		background-position: center bottom;
		background-size: contain;
	}

	.card h4{
		margin-block: .5em;
		font-size: var(--fs-step-1);
	}

	.card h3{
		line-height: 1.25;
		font-weight: 300;
	}

	.card a:not(.btn){
		color: black;
		text-decoration: none;
	}

	.card .map-link:after{
		content: none;
	}

	.card .details-link{
		display: inline-block;
		margin-block-start: .5rem;
		font-weight: 500;
		transition: color .2s;
	}

	.card .details-link:after{
		content: '\f054';
		font-family: FontAwesome;
		font-size: .9rem;
		margin-left: .25em;
	}

	.card .details-link:hover{
		color: hsl(var(--clr-teal));
	}

	.card .card-content{
		display: flex;
		flex-direction: column;
		padding-block-start: 1rem;
		order: 1;
	}

	@media(min-width: 768px){
		.card .card-content{
			order: initial;
		}
	}

	.card > .poster.left-bleed .card-content{
		padding: 0 var(--right-padding) var(--bottom-padding) var(--left-padding)
	}

	@media(min-width: 768px){
		.card > .poster.left-bleed .card-content{
			padding-left: 0;
		}
	}

	.card .card-header{
		background-color: hsl(var(--clr-teal));
		background-image: url(/images/swirlies-transparent.png);
		background-repeat: no-repeat;
		background-position: center 11%;
		background-size: 250%;
		padding: 4.0625rem var(--column-gap) 0;
		color: white;
		margin-bottom: 1.5rem;
	}

	.card .card-header h4{
		font-size: var(--fs-step-1);
	}

	.card .card-header h4 a{
		color: white;
	}
}