.cards {
    container-type: inline-size;
    container-name: cards;
}
.cards_grid {
    display: grid;
    grid-template-columns: repeat(var(--cards_rc), minmax(var(--card_minwidth), 1fr));
	grid-template-rows: max-content;
	justify-items: center;
    gap: var(--cards_gap);
}
.cards_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cards_gap);
}
.cards_flex > .card {
	flex: 1 1 var(--card_minwidth);
}
.card {
	container-type: inline-size;
    container-name: card;
	border-radius: var(--card_br);
	overflow: hidden;
	width: 100%;
	max-width: var(--card_maxwidth);
}
.card_in {
	height: 100%;
	/*min-height: var(--card_height);*/
}
.cards_grid.fixed_media .card_media,
.cards_flex.fixed_media .card_media {
	height: var(--card_media_height);
}
.cards_grid.ratio_media .card_media,
.cards_flex.ratio_media .card_media {
	aspect-ratio: var(--card_media_aspectratio);
}
.cards_grid.var_media .card_media,
.cards_flex.var_media .card_media {
    flex: 1;
	min-height: var(--card_media_height);
	/* set .card_in: min-height */
}
.card_media img,
.card_media video {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.card_body {
	flex: 1;
	padding: var(--card_spacing);
}
.card_body, .card_main {
	gap: var(--card_spacing);
}
.card_actions {
	margin-top: auto;
}

/* Cards Container Queries */
@container cards (max-width: 1100px) {
.cards_grid {
    grid-template-columns: repeat(var(--cards_rc), minmax(calc(var(--card_minwidth) * 0.9), 1fr));	
}
.cards_grid,
.cards_flex {
	gap: calc(var(--cards_gap) * 0.8);
}
}
@container cards (max-width: 980px) {
.cards_grid,
.cards_flex {
	max-width: 750px;
}
}
@container cards (max-width: 700px) {
.cards_grid,
.cards_flex {
	gap: calc(var(--cards_gap) * 0.6);
}
}
@container cards (max-width: 640px) {
.cards_grid,
.cards_flex {
	max-width: 365px;
	grid-template-columns: auto;
	gap: var(--m);
}
}
@container cards (max-width: 450px) {
.cards_grid,
.cards_flex {
	max-width: 300px;
}
}

/* Card Container Queries */
@container card (max-width: 320px) {

}