@charset "UTF-8";
/* CSS Document */


/* ----- Kde nás najdeš ----- */



#hradec {
	padding-top: 100px;
	padding-bottom: 80px;
}

.hradec-top h2 {
	max-width: 600px;
	margin-bottom: 30px;
}

.hradec-top div {
	padding-top: 10px;
	max-width: 920px;
}

#hradec-galerie {
	border-bottom: 1px solid var(--cnx-greylight);
	padding-bottom: 120px;
}

#hradec-galerie .container {
	max-width: 100%;
}

.hradec-galerie-container {
	display: block;
	width: 100%;
	mask-image: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);
	padding: 60px 0 20px;
}

.hradec-galerie-scroll {
	display: flex;
	white-space: nowrap;
	margin-bottom: 20px;
}

.hradec-galerie-scroll div {
	animation: 70s slider infinite linear;
	display: flex;
}

.hradec-galerie-scroll img {
	height: 360px;
	margin: 0 10px;
}

@keyframes slider {
	to {
		transform: translateX(-100%);
	}
}

.hradec-popisek {
	text-align: center;
}



/* ----- Prostory a učebny ----- */



#prostory {
	padding-top: 120px;
	padding-bottom: 150px;
}

.ucebna {
	display: grid;
	grid-template-columns: 35% 65%;
	grid-template-rows: auto;
}

.ucebna img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	user-select: none;
}

.ucebna div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding-left: 60px;
}

.ucebna h3, .ucebna p {
	margin: 0;
	max-width: 600px;
}

.ucebna:first-of-type {
	margin-top: 100px;
}

.ucebna + .ucebna {
	margin-top: 60px;
}



/* ----- Vybavení a technika ----- */



#vybaveni {
	padding-top: 120px;
}

.vybaveni {
	padding-top: 80px;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap: 30px 20px;
}

.vybaveni img {
	width: 100%;
	margin-bottom: 10px;
	user-select: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}



/* ----- Responz – Tablet ----- */



@media screen and (max-width: 1199px) {
	
	
	.hradec-top {
		flex-direction: column;
	}
	
	.hradec-galerie {
		grid-template-columns: 1fr 1fr;
	}

	.ucebna img {
		aspect-ratio: 3 / 2;
	}
	
	.ucebna {
		grid-template-columns: 1fr 2fr;
	}
	
	.ucebna div {
		padding-left: 40px;
		padding-top: 10px;
	}
	
	.ucebna + .ucebna {
		margin-top: 80px;
	}
	
	.vybaveni {
		grid-template-columns: 1fr 1fr 1fr;
	}
	
}



/* ----- Responz – Mobil ----- */



@media screen and (max-width: 599px) {
	
	
	.hradec-top {
		flex-direction: column;
	}
	
	.hradec-galerie {
		grid-template-columns: 100%;
	}

	.ucebna img {
		aspect-ratio: 3 / 2;
	}
	
	.ucebna {
		grid-template-columns: 100%;
	}
	
	.ucebna div {
		padding-left: 0;
		padding-top: 30px;
	}
	
	.ucebna + .ucebna {
		margin-top: 80px;
	}
	
	.vybaveni {
		grid-template-columns: 100%;
	}
	
}