@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
body {
	margin: 0px;
	font-family: 'Roboto', sans-serif;
}
header {
	padding: 10px 10%;
	text-align: center;
	background-color: black;
	color: white;
}
table {border-collapse: collapse; margin: auto;}
tr {border-bottom: 1px solid rgb(179, 179, 179);}
th,td {padding: 10px 20px; vertical-align: top;}
a {color: black;}
img {
	width: 100%;
}

section {
	display: grid;
	padding: 50px 10%;
}
section.alternate {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* zalamování gridu */
	column-gap: 30px;
	row-gap: 30px;
}
.alternate article {
	display: grid;
	grid-template-columns: 1fr;	
	grid-template-rows: 1fr;
	grid-template-rows: min-content max-content;
	/*align-items: end;				/* zarovnání vertikálně */
	align-items: stretch;			/* roztažení vertikálně */
	justify-content: stretch;	/* roztažení horizontálně */
	overflow: hidden;					/* oříznutí zasunutého figure */
}
.alternate article figure, .alternate article img {
	grid-column: 1;						/* figure i img budou přes sebe */
	grid-row: 1;
	align-self: start;
}

.alternate article figure {
	background-color: rgba(255, 255, 255, 0.6);
	padding: 18px 15px 5px 15px;
	margin: 0px;
	z-index: 0;
	transition: 1s;
	grid-row: 1;
	align-self: flex-end;
	transform: translateY(calc(100% - 55px));	/* 55px - výška h2 - font-size, padding a margin */
}
.alternate article figure h2 {
	font-size: 20px;
	margin: 0px 0px 15px 0px;
}
.alternate article:hover figure {
	transform: translateY(0%);	/* vyjetí na 30% shora */

}


@media(min-width: 850px){
	.alternate article img {
		clip-path:  polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
		transition: 1s;
	}
	.alternate article:hover img{
		transform: rotate(-140deg); transform-origin: 0% 50%;
		transition: 1s;
	}
	.alternate article:hover figure{
		opacity: 1;
		align-self: center;
	}
	.alternate article figure{
		opacity: 0;
	}
}