.main-intro {
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
	width: 100vw;
	flex-direction: column;
}

.main-intro > a {
	height: calc(100% / 2);
	text-decoration: none;
	border-style: solid;
    border-color: #ececec;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.main-intro > a:before { 
	content: '';
	position:absolute;
	top: 0%;
	left: 0%;
	z-index: 1;
	width: 100%;
	height: 100%;
	transition: transform .6s;
	transform: scale(1);
}

.main-intro > a:hover::before {
	transition: transform .6s;
	transform: scale(1.05);
}

.main-intro > a.conference-villa {
	border-width: 0px;
	
}

.main-intro > a.conference-villa:before {
	background: #fff url('./img/intro/conference-1-638x800.jpg') center/cover no-repeat;
}

.main-intro > a.restaurant-catering {
	border-width: 0px;
}

.main-intro > a.restaurant-catering:before {
	background: #fff url('./img/intro/I8A4713.ed_-1200x800.jpg') center/cover no-repeat;
}

.main-intro > a.delivery-menu {
	border-width: 0px;
}

.main-intro > a.delivery-menu:before {
	background: #fff url('./img/intro/homecatering-5-1200x800.jpg') center/cover no-repeat;
}


.main-intro > a .info {
	position:relative;
	z-index: 2;
    padding: 0 0 5px 0;
    color: #fff;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    width: 100%;
    transition: transform .3s;
    transform: scale(1) translateZ(0) translateY(0);

}

.main-intro > a:hover .info {
	transition: transform .3s;
    transform: scale(1) translateZ(0) translateY(-10px);
}

.main-intro > a.conference-villa .info {
	background-color: rgba(67, 110, 137, 0.8);
}

.main-intro > a.restaurant-catering .info{
	background-color: rgba(53, 166, 151, 0.8);
}

.main-intro > a.delivery-menu .info{
	background-color: rgba(171, 209, 25, 0.8);
}

.main-intro h1,
.main-intro h2 {
	font-size: 42px;
	line-height: 1;
	margin: 8px 0px;
	font-family: "Futura PT Web Book",sans-serif;
}
.main-intro h3 {
	font-size: 24px;
	line-height: 1;
	margin: 5px 0px;
	font-family: "Futura PT Web Book",sans-serif;
	font-weight: 300;
}


@media screen and  (min-width: 768px) {
	.main-intro h1,
	.main-intro h2 {
		font-size: 25px;
	}
	.main-intro h3 {
		font-size: 14px;
	}

	.main-intro > a {
		width: calc(100% / 2);
		height: 100vh;
	}
}

@media screen and (min-width: 992px) {

	.main-intro h1,
	.main-intro h2 {
		font-size: 42px;
	}
	.main-intro h3 {
		font-size: 24px;
	}

	.main-intro > a .info {
		margin-left: 60px;
    	margin-right: 60px;
    	padding: 20px 0px;
    }
}

@media screen and (min-width: 1200px) { 
	.main-intro > a .info {
		margin-left: 100px;
    	margin-right: 100px;
    }
}