*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}body{
	background-color: #01d5ff;
}.wrapper{
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}.container{
	height: 400px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
}.card{
	width: 80px;
	background-size: cover;
	cursor: pointer;
	overflow: hidden;
	border-radius: 2rem;
	margin: 0 10px;
	display: flex;
	align-items: flex-end;
	transition: .6s cubic-bezier(.28,-0.03,0,.99);
	box-shadow: 0 10px 30px -5px rgba(0,0,0,0.8);
}.card>.row{
	color: white;
	display: flex;
	flex-wrap: nowrap;
}.card>.row>.icon{
	color: white;
	border-radius: 50%;
	width: 50px;
	display: flex;
	justify-content: center;
	opacity: .7;
	align-items: center;
	margin: 15px;
}.icon[for = 'typ1']{
	background-color: #b0c9df;
}.icon[for = 'typ2']{
	background-color: #7392a2;
}.card>.row>.description{
	display: flex;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
	height: 80px;
	width: 520px;
	opacity: 0;
	transform: translateY(30px);
	transition-delay: .3s;
	transition: all .3s ease;
}.description p{
	color: #fff700;
	padding-top: 5px;
}.description h4{
	color: #fff700;
	text-transform: uppercase;
}input{
	display: none;
}input:checked + label{
	width: 600px;
}input:checked + label .description{
	opacity: 1 !important;
	transform: translateY(0) !important;
}.card[for = 'c1']{
	background-image: url("/01/gzoi/img/chapter_1.jpg");
}.card[for = 'c2']{
	background-image: url("/01/gzoi/img/gzoi_1.jpg");
}