/*sendungen styles*/
.show_box {
	margin-block: 1em;

	h3 {
		text-align: center;
	}

}

.show_flex_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1em;
	align-items: stretch;
	margin-block-end: 1em;
}



.show_flex_item {
	width: 30%;
	height: fit-content;
	flex-grow: 1;
	background: lch(100% 0.01 296.81);
	color: oklch(26.901% 0.18088 265.09);
	border-radius: 0.5em;
	box-shadow: 0 0 .6em oklch(62.745% 0.18233 265.362 / 0.445);
	/* border: 0.36em solid oklch(21% 0.18088 265.09); */
	/* box-shadow: 0 0.12em .5em rgba(0, 0, 0, .5); */
	padding: .5em;

	&:hover {
		box-shadow: 0 0 .6em oklch(26.901% 0.18233 265.362 / 1);
	}

	/* .main-subheading-2 {
        margin-block: 0 1em;
    } */
}


.show_banner {
	width: 100%;
	margin: 0;
	margin-bottom: .5em;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

.show_body {
	/* background: black; */
	padding-inline: 0.75em;
	padding-block-end: 1em;
	/* display: grid; */
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, 1fr);
}

.show_name {
	color: oklab(50.951% 0.18218 0.10172);
	font-weight: bolder;
	font-size: larger;
	grid-row: 1/2;
	margin-bottom: .25em;
}

.show_times::before {
	content: 'Broadcast: ';
	font-weight: 900;
}

.show_repeats::before {
	content: 'Rerun date: ';
	font-weight: 900;
}

.show_desc {
	grid-row: 2/4;
}

.show_host {
	color: oklab(50% 0 0);
	/* font-style: italic; */
	font-weight: 900;
	grid-row: 4/5;

}

.show_host::before {
	content: 'Host: ';
	font-weight: 500;
}


.show_socials {
	width: fit-content;
	height: 2.75em;
	/* background-color: black; */
	display: flex;
	flex-direction: row;
	gap: .5em;
	justify-content: space-evenly;
	grid-row: 5/6;
	margin-block-start: 1em;
	float: right;

	a {
		img {
			height: 100%;
		}
	}
}



/*breakpoints*/
@media (max-width: 1440px) {}

@media (max-width: 1280px) {}

@media (max-width: 1024px) {}

@media (max-width: 900px) {
	.show_flex_container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.show_flex_item {
		width: 100%;
	}
}

@media (max-width: 768px) {}

@media (max-width: 480px) {}