<section class="day-events new">

 <h2> DAYTIME EVENTS </h2>

     <div class="wrapper">
       <div class="day-card">
         <input type="checkbox" id="card1" class="more" aria-hidden="true">
    <div class="content">
    <div class="front" style="background-image: url('https://torange.biz/photofx/39/8/black-white-pumpkin-halloween-background-full-round-moon-39551.jpg')">
      <div class="inner">
         <h2>PUMPKIN CARVING</h2>
                         
          <label for="card1" class="button" aria-hidden="true">
                                Details
                            </label>
                        </div>
                    </div>
                    <div class="back">
                        <div class="inner">
                            <div class="info">
                                <span>3+</span>
                                <div class="icon">
                                    <i class="fas fa-users"></i>
                                    <span>years</span>
                                </div>
                            </div>
                            <div class="info">
                                <span>5</span>
                                <div class="icon">
                                    <i class="fas fa-door-open"></i>
                                    <span>per group</span>
                                </div>
                            </div>
                            <div class="info">
                                <span>Y </span>
                                <div class="icon">
                                    <i class="fas fa-bed"></i>
                                    <span>book?</span>
                                </div>
                            </div>
                            <div class="info">
                                <span>1</span>
                                <div class="icon">
                                    <i class="fas fa-bath"></i>
                                    <span>bath</span>
                                </div>
                            </div>
                            <div class="description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, accusamus.</p>
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates earum nostrum ipsam
                                    ullam, reiciendis nam consectetur? Doloribus voluptate architecto possimus perferendis
                                    tenetur nemo amet temporibus, enim soluta nam, debitis.</p>
                            </div>
                            <div class="location">Pumpkin Carving</div>
                            <div class="price">£6 / per person</div>
                            <label for="card1" class="button return" aria-hidden="true">
                                <i class="fas fa-arrow-left"></i>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            

@import url('https://fonts.googleapis.com/css?family=Montserrat:100');

* {
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: white;
  text-align: center;
  background-color: black;
}

$accent-color: red;


.wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.day-card {
	width: 420px;
	height: 340px;
	margin: 1em;
	perspective: 1500px;
	.content {
		position: relative;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
	}
}

.more {
	display: none;

	&:checked ~ .content {
		transform: rotateY(180deg);
	}
}

.front,
.back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	border-radius: 6px;

	.inner {
		height: 100%;
		display: grid;
		padding: 1.5em;
		transform: translateZ(80px) scale(0.94);
	}
}

.front {
	background-color: rgba(0, 0, 0, 0.1);
	background-size: cover;
	background-position: center center;
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 6px;
		backface-visibility: hidden;
		background: linear-gradient(
			40deg,
			rgba(207, 0, 15, 0.5),
			rgba(0, 0, 0, 0.5)
		);
	}
	.inner {
		grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
		justify-items: center;
	}

	h2 {
		grid-row: 2;
		margin-bottom: 0.3em;
		text-transform: uppercase;
		letter-spacing: 10px;
		color: #fff;
		font-weight: 700;
		text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
	}

	.rating {
		grid-row: 3;
		color: rgba(255, 255, 255, 0.8);
		font-size: 14px;
		display: flex;
		flex-flow: row nowrap;
		i {
			margin: 0 1px;
		}
	}
}

.back {
	transform: rotateY(180deg);
	background-color:  rgba(0, 0, 0, 1);
	border: 2px solid rgb(240, 240, 240);
	.inner {
		grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
		grid-template-columns: repeat(4, auto);
		grid-column-gap: 0.8em;
		justify-items: center;
	}

	.info {
		position: relative;
		display: flex;
		align-items: center;
		color: $accent-color;
		grid-row: 3;
		&:not(:first-of-type):before {
			content: '';
			position: absolute;
			left: -0.9em;
			height: 18px;
			width: 1px;
			background-color:  rgba(0, 0, 0, 0.1);
		}
		span {
			font-size: 2em;
			font-weight: 700;
		}
		i {
			&:before {
				background: linear-gradient(40deg, $accent-color, rgb(67, 138, 243));

				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
			}
			font-size: 1.2em;
		}
		.icon {
			margin-left: 0.3em;
			span {
				display: block;
				margin-top: -0.25em;
				font-size: 0.8em;
				font-weight: 600;
                white-space: nowrap;
                
			}
		}
	}

	.description {
		grid-row: 5;
		grid-column: 1/-1;
		font-size: 0.86em;
		border-radius: 5px;
		font-weight: 600;
		line-height: 1.4em;
		overflow: auto;
		color: $accent-color;
		padding-right: 10px;
	}

	.location,
	.price {
		font-weight: 600;
		color: $accent-color;
		grid-row: 1;
		font-size: 0.86em;
	}

	.location {
		grid-column: 1/3;
		justify-self: left;
	}

	.price {
		grid-column: 3/-1;
		justify-self: right;
	}

	.button {
		grid-column: 1/-1;
		justify-self: center;
	}
}

.button {
	grid-row: -1;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	cursor: pointer;
	display: block;
	padding: 0 1.5em;
	height: 3em;
	line-height: 2.9em;
	min-width: 3em;
	background-color: transparent;
	border: solid 2px #fff;
	color: #fff;
	border-radius: 4px;
	text-align: center;
	left: 50%;
	backface-visibility: hidden;
	transition: 0.3s ease-in-out;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);

	&:hover {
		background-color: #fff;
		box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
		text-shadow: none;
		color: $accent-color;
	}

	&.return {
		line-height: 3em;
		color: $accent-color;
		border-color: $accent-color;
		text-shadow: none;
		&:hover {
			background-color: $accent-color;
			color: #fff;
			box-shadow: none;
		}
	}
}

::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background:  rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
	background: lighten($accent-color, 20%);
}
::-webkit-scrollbar-thumb:hover {
	background: $accent-color;
}