body { background: url('images/bg.svg') 50% 50% no-repeat; background-size: cover; min-height: 100vh; }

h1 { color: var(--red); }

header { padding-top: 3rem; }
header .wrapper {  padding: 0 0 6rem 0; }
header article { position: relative; z-index: 2; padding: 5rem 0 0 0; width: 41rem; }
header article h1 { margin-bottom: 1.8rem; }
header article h2 { margin-bottom: 0.3rem; }
header article p { font-size: 1.2rem; max-width: 25rem; }

#logo { width: 12rem; }

#logo2 { aspect-ratio: 238/74; height: 3.7rem; display: block; position: relative; }
#logo2 img { display: block; position: absolute; top: 0; }
#logo2 img:first-child { left:0; height: 100%; }
#logo2 img:last-child 	{ right: 0; height: 46.77%; }

#tvoe { position: absolute; top: -0.2rem; right: 0; width: 7rem; }

#collage { display: block; width: 42rem; position: absolute; top: 4rem; right: -9rem; z-index: 1; }



#promo .wrapper { background: white;  display: flex; gap: 0; position: relative; padding: 0; align-items: center;  }
#promo .wrapper > * { width: 50%; border-radius: 1.4rem; overflow: hidden; }

#promo .wrapper::after { content: ''; display: block; width: 7.6rem; aspect-ratio: 1/1; position: absolute; bottom: -2.5rem; left: 4rem; background: url('images/m.svg') 50% 50% no-repeat; background-size: cover; margin-bottom: -1px; }

#promo article { padding: 2rem 4rem; }

#promo aside img,
#promo aside iframe { width: 100%; /*aspect-ratio: 642/369;*/ aspect-ratio: 1920/1080; display: block; }

#promo h3 { font-size: 1.7rem; margin-bottom: 0.5rem; }


#promo .wrapper, 
	#thanks .wrapper { box-shadow: 0px 6px 2.5rem rgba(0,0,0,0.1); border-radius: 1.4rem; }

#thanks { margin-top: 6rem; margin-bottom: 6rem; text-align: center; }
#thanks .wrapper { background: #fff url('images/thanks_bg.svg') bottom center no-repeat; background-size: contain; padding-top: 3rem; padding-bottom: 3rem; }
#thanks .wrapper::after { content: ''; display: block; height: 5.7rem; aspect-ratio: 1/1; position: absolute; top: -2.85rem; right: 2rem; background: url('images/thank_you.svg') 50% 50% no-repeat; background-size: contain; margin-bottom: -1px; }
#thanks .wrapper::before { content: ''; display: none; width: 5rem; bottom: -2.5rem; left: 2rem; aspect-ratio: 1/1; position: absolute;  background: url('images/m.svg') 50% 50% no-repeat; background-size: cover; margin-bottom: -1px; }

#final { display: flex; flex-direction: column; gap: 3rem; justify-content: space-between; }

#final header article { text-align: center; margin: 0 auto; padding-top: 3rem; }
#final header article p { margin: 0 auto; max-width: 35rem; }

#final header .wrapper { position: relative; padding-bottom: 0; }
#final header .wrapper::before { content: ''; display: block; height: 4.5rem; top: 10rem; left: 3rem; aspect-ratio: 81/90; position: absolute;  background: url('images/book2.svg') 50% 50% no-repeat; background-size: cover; }
#final header .wrapper::after { content: ''; display: block; width: 7.6rem; top: 14rem; right: 0; aspect-ratio: 1/1; position: absolute;  background: url('images/m.svg') 50% 50% no-repeat; background-size: cover; }

#final #thanks { margin-top: 0; margin-bottom: 0; }
#final #thanks .wrapper::after { left: 2rem; right: auto; }
#final #thanks .wrapper { padding-left: 2rem; padding-right: 2rem; }
#final #thanks article { max-width: 47rem; margin: 0 auto; font-size: 1.2rem;  }

#final #thanks .wrapper::before { content: ''; display: block; width: 4rem; top: 5rem; right: -2rem; left: auto; bottom: auto; aspect-ratio: 77/120; position: absolute;  background: url('images/map.svg') 50% 50% no-repeat; background-size: contain; }


@media (max-width: 1300px){
	#collage { width: 38rem; }
	
	#promo .wrapper::after { width: 5rem; bottom: -1.65rem; }
	
	#thanks .wrapper::after { height: 4rem; top:-2rem; }
}

@media (max-width: 1200px){
	#promo article { padding: 2rem; }
	#promo .wrapper::after { left: 2rem; }
}

@media (max-width: 1130px){
	#collage { width: 34rem; top: 8rem; }
}

@media (max-width: 999px){
	
	header .wrapper { padding-bottom: 9rem; }
	#collage { width: 30rem; top: 16rem; right: -5rem; }
	
	#final header .wrapper::before { height: 3.5rem; }
	#final header .wrapper::after { width: 5rem; }
	#final #thanks .wrapper::before { width: 3rem; right: -1.5rem; }

}

@media (max-width: 800px){
	#promo article { padding: 2rem 1.5rem; }
	#promo .wrapper::after { left: 1.5rem; }
}

@media (max-width: 750px){
	header .wrapper { padding-bottom: 3rem; }
	#collage { width: 106%; top: 0; right: 0; position: relative; margin: 1.5rem -0.5rem 0 -0.5rem; }
	
	
	/*#promo .wrapper::after,
		#thanks .wrapper::after	{ display: none;  }
	#thanks .wrapper::before { display: block; }*/
	#promo .wrapper::after { bottom: auto; width: 4rem; top: -2.7rem; }
	#thanks .wrapper::after { height: 3.6rem; top: -1.8rem; }
	
	#final header .wrapper::before,
		#final header .wrapper::after,
		#final #thanks .wrapper::before,
		#final #thanks .wrapper::after { display: none; }
	#final h1 { font-size: 2.8rem; }
	
	#promo .wrapper { flex-direction: column; }
	#promo .wrapper > * { width: 100%; }
	#promo article { padding: 3rem 1.5rem; }
	#promo h3 { margin-bottom: 0; }
	
	#thanks .wrapper { padding-top: 2rem; padding-bottom: 2rem; }
	#thanks h3 br { display: none; }
}
@media (max-width: 499px){
	#final { gap: 2rem; }
	#final #thanks .wrapper { padding: 2rem 1.5rem; }
	#final header article { text-align: left; padding-top: 1.5rem; }
	#final header article p br { display: none; }
	
	header { padding-top: 2rem; }
	
	#logo { width: 11rem; }
	#logo2 { height: 3.4rem; }
	#tvoe { width: 5.5rem; }
	
	header article { padding-top: 2rem; }
	
	
	#thanks { text-align: left; margin-top: 3rem; margin-bottom: 5rem; }
}
@media (max-width: 399px){
	#promo article { padding: 2rem 1.2rem; }
}