#app {
	position: relative;
	padding: 10vh 5vw;
	color: #fff;
	min-height: 100vh;
	background-size: cover;
	background-image: url(../images/mexicogp2026/mexicogp_poster2026_bg_tablet.webp);
	display: flex;
	justify-content: center;
	align-items: center;
}
#app:before{
	content:'';
	position: absolute;
	z-index: 0;
	inset: 0;
	/* background-color: rgba(0,0,0,0.7); */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.2+1,0.5+100 */
	background: linear-gradient(45deg,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 1%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

.app_content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5vw;
	z-index: 1;
}

#app .info {
	width: 70%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#app .app_content .image {
	width: 30%;
	max-width: 380px;
}

img {
	width: 100%;
	height: auto;
}

#app .info .title {
	font-size: 6vw;
	line-height: 6vw;
	margin-bottom: 20px;
}

.cta{
	font-size: 2rem;
}

#app .info .button_container {
	position: relative;
	width: 90%;
	max-width: 500px;
	display: flex;
	margin-top: 30px;
	margin-bottom: 40px;
}

#app .info .button_container .app_btn {
	width: 50%;
	padding: 0 5px;
}
#app .info .button_container .app_btn img {
	max-height: 65px;
	object-fit: contain;
}


@media(max-width:992px){
  .app_content{
	flex-direction: column-reverse;
	text-align: center;
  }
  #app .info{
	align-items: center;
  }
  #app .app_content .image {
	  width: 40%;
  }
}

@media(max-width:768px){
	#init_menu_mxgp #logo_menu_mxgp .mexicogp_white_logo {
		display: block !important;
	}
	#init_menu_mxgp #logo_menu_mxgp .mexicogp_black_logo {
		display: none !important;
	}
	#init_menu_mxgp #open_menu_mxgp {
		color: #fff;
	}
}