.card-layout {
	display: flex;
	flex-wrap: wrap;
}

.card-layout > * {
	flex-grow: 1;
	flex-basis: 280px; /* at what size to switch to rows */
}

.wrap-detector { /* reference point for changing image height is class wrap-detector */
	container-name: wrap-detector;
	container-type: inline-size;
}

.card-wrapper {
	overflow: clip;
	background-color: var(--card-bg-color);
	border: var(--card-border-width) solid var(--card-border-color);
	border-radius: var(--box-border-radius);
}

.card-image-title {
	color: var(--card-image-title);
	font-size: 92%;
	font-style: italic;
	letter-spacing: .1em;;
}

.card-content {
	display: grid;
	align-content: center;
	gap: .4rem;
	padding-block: 1rem; /* vertical padding */
	color: var(--card-text-color);
}

.card-content > * {
	padding-inline: 1.2rem; /* content side padding */
	margin: 0;
}

.card-content p {
	font-size: 1.2rem;
}

.card-image { 
	width: 100%;
	height: 100%;
	object-fit: cover;

	@container (width > 50vw) { /* if it takes up less than 50 viewpoint width */
		height: 25vh; /* limit image height to 30 viewpoint height */
	}
	
	@container (width < 50vw) { /* if it takes up more than 50 viewpoint width. */
		height: 35vh; /* limit image height to 40 viewpoint height */
	}
}


.card-columns {
	margin-block: 1rem;
	margin-bottom: 140px;
	display: grid;

	@media (width > 1000px) { /* when to switch to 3 card-columns */
		grid-template-columns: repeat(3, 1fr);}
		gap: 1rem;

		& > * {
		container-type: inline-size;
		/*border: 4px solid hsl(0 0% 100% / .5);
		border-radius: var(--card-border-radius);
		overflow: clip;*/
	}
}

@media (width > 660px) {	
	.card-content p {
		font-size: 1.2rem;
	}		
}

@media (width > 1000px) {	
	.card-columns .card-image { /* ONLY for images in 3 column layout */
		@container (width < 50vw) { /* if it takes up more than 50 viewpoint width. */
			height: 20vh; /* limit image height to 40 viewpoint height */
		}
	}			
}