.intro-grid {

	& {display: grid; grid-template-columns: 1fr 400px; gap: 50px; align-items: center;}
	p {text-align: justify;}
	img {max-width: 100%; border-radius: 20px; border: 1px solid var(--c-bg-light); height: 110%; object-fit: cover; box-shadow: 0 5px 15px 0 #0005;}
	:nth-child(1) {margin-top: 0px;}
	:nth-last-child(1) {margin-bottom: 0px;}

	@media screen and (max-width: 1000px) {
		& {display: flex; flex-direction: column; gap: 35px;}
		img {width: 100%; aspect-ratio: 16/10; max-width: 550px; box-shadow: none;}
		&, p {text-align: center; text-wrap: balance;}
	}

}

.news-section {

	.inner {max-width: 1280px;}
	& {background-image: linear-gradient(0deg, #0f0b0f, #0f0b0f44, #0f0b0f), url("https://data.enchant.cz/img/mc/end.webp"); background-size: cover; background-position: center;}
	h2 {filter: drop-shadow(3px 3px 1px #0005); margin-bottom: 40px;}
	.cards {display: flex; flex-wrap: wrap; text-align: left; gap: 10px;}
	.card {
		& {flex: 1 1 350px; padding: 24px; border: 1px solid #5b394a99; background-color: color-mix(in srgb, #251931, #000b 60%); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: all .5s;}
		&:hover {
			& {transform: scale(1.02);}
		}
		h4 {text-wrap: balance; margin: 0;}
	}

	@media screen and (max-width: 750px) {
		.cards {max-width: 550px; margin: auto;}
	}

}

.author-date {
	& {font-size: 90%; margin-top: auto; display: flex; gap: 10px;}
	img {max-width: 26px; border-radius: 5px;}
	.author {font-weight: 700;}
	.date {opacity: .7;}
}

.join-section {
	& {position: relative;}
	.inner {max-width: 700px;}
	.btn {backdrop-filter: none; position: relative; z-index: 1;}
	.btn-row {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 25px 0; padding: 0 30px;}
	&:before {
		pointer-events: none; content: ""; background: radial-gradient(at center, #faa1 20%, transparent 70%) center no-repeat, url("https://data.enchant.cz/img/arrows.webp") no-repeat center; background-size: 700px 400px, 1200px; position: absolute; top: -300px; left: 0; width: 100%; bottom: -300px; z-index: 1;
	}
}