.cards {
	container-type: inline-size;
	container-name: cards_wrap;
	background-color: var(--bg40);
    display: flex;
    justify-content: center;
}
.cards_container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
	gap: 2.5rem;
}
.card {
	container-type: inline-size;
	container-name: card;
	box-sizing: border-box;
	border-radius: var(--br);
	overflow: hidden;
	/*box-shadow: 0 5px 30px var(--boxshadow_color);*/
	box-shadow: 0 28px 42px -28px var(--boxshadow_color), 0 17px 34px -17px var(--boxshadow_color);
}
.card:focus-within {
    outline: 2px solid var(--focus_outline_color, orange);
    outline-offset: var(--focus_outline_offset, 2px);
}
.card_in {
	--gap: 2.4rem;
	width: 100%;
	height: 50rem;
	background-color: var(--bg);
	z-index: 1;
}
.card_in:hover {
	text-decoration: none;
}
.card_in * {
	box-sizing: border-box;
}
.card_pic {
	position: relative;
	width: 100%;
	margin: 0;
	flex: 1;
}
.card_pic > picture > img,
.card_pic > img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
    height: 100%;
}
.card_pic > .overlay:nth-child(2) {
	background: linear-gradient(52deg, rgba(0, 4, 17, 0) 35%, rgba(0, 4, 17, 0.7) 100%);
	opacity: 0.4;
}
.card_pic > .overlay:nth-child(3) {
	inset: 1.5rem;
}
.card_location {
	position: absolute;
	right: 0;
	font-size: 1.2rem;
	padding: 0.2em 0.5em 0.2em;
	background-color: var(--bg);
	border-radius: var(--br_less);
	overflow: hidden;
	display: flex;
    align-items: center;
	gap: 0.4em;
}
.card_location > span,
.card_location > .icon {
	z-index: 1;
}
.card_location > .icon {
	width: 1.6rem;
	height: 1.7rem;
	color: var(--prim40);
	stroke-width: 1.7;
}
.card_in, .card_details {
	display: flex;
	flex-direction: column;
}
.card_details {
	width: 100%;
	padding: var(--gap);
	gap: var(--gap);
}
.card_date {
	display: flex;
	gap: 1rem;
	font-size: 1.4rem;
	line-height: 1.5em;
	color: var(--font_softer);
}
.card hgroup {
	margin: 0;
}
.card h3 {
	font-size: 2.1rem;
	font-weight: 525;
	margin-bottom: 0.4em;
}
.card_footer {
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
	gap: 1.5rem;
}
.card_price {
	display: flex;
    align-items: baseline;
	flex-wrap: wrap;
	gap: 0.7rem;
	flex: 1;
}
.card_price > span {
	white-space: nowrap;
}
.card_price > span:nth-child(1) {
	font-size: 2.0rem;
	font-weight: 600;
	line-height: 2.6rem;
	color: var(--prim40);
}
.card_discount .card_price > span:nth-child(1) {
	color: var(--red);
}
.card_price > span:nth-child(2) {
	font-size: 1.4rem;
	color: var(--font_softer);
}
.card_provider {
	width: 2.6rem;
	height: 2.6rem;
}
.card_provider > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.card ul.bullets {
	font-size: 1.5rem;
	line-height: 1.8em;
}
.card ul.bullets > li {
	gap: 0.65em;
	margin: 0.2em 0;
}
.card ul.bullets > li > span {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}




@media screen and (hover: hover) and (pointer: fine) {
.card:hover {
	box-shadow: 0 12px 25px var(--boxshadow_color30);
}
}
@container cards_wrap (max-width: 1100px) {
.cards_container {
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
	gap: 2.3rem;
}
}
@container cards_wrap (max-width: 980px) {
.cards_container {
	max-width: 750px;
}
}
@container cards_wrap (max-width: 700px) {
.cards_container {
	gap: 2.1rem;
}
}
@container cards_wrap (max-width: 640px) {
.cards_container {
	max-width: 365px;
	grid-template-columns: auto;
	gap: var(--m);
}
}
@container card (max-width: 365px) {
.card_in {
	--gap: 2.2rem;
	height: 47.5rem;
}
.card_pic > .overlay:nth-child(3) {
    inset: 1.4rem;
}
}
@container card (max-width: 340px) {
.card_in {
	--gap: 2.1rem;
	height: 45rem;
}
.card h3 {
    font-size: 2.0rem;
}
.card ul.bullets {
    font-size: 1.4rem;
}
.card_price > span:nth-child(1) {
    font-size: 1.9rem;
	line-height: 2.5rem;
}
.card_provider {
    width: 2.5rem;
    height: 2.5rem;
}
}
@container card (max-width: 320px) {
.card_in {
	--gap: 2.0rem;
	height: 42.5rem;
}
.card h3 {
    font-size: 1.9rem;
}
.card_date {
    font-size: 1.2rem;
}
.card_pic > .overlay:nth-child(3) {
    inset: 1.3rem;
}
}