/*** home page styling ***/

body { 
	background-image: url('src/img/home-cover.webp'); 
}

header {
	height: calc(100vh - 12rem);
	
	h1 {
		margin-bottom: 0; 
		border-bottom: 0;
		
		img {
			max-width: 48rem;
			margin: 0 auto;
			filter: drop-shadow(0 0 .8rem var(--bground-alt));
		}
	}
}

main {
	section {
		background-position: center center; 
		background-attachment: fixed; 
		background-size: cover;	
		
		section-content {
			background-position: center center; 
			background-attachment: fixed; 
			background-size: cover; 
			flex-direction: column; 
			padding: .8rem; 
			width: 100%;
			max-width: 96rem;
			margin: 0 auto;
			
			section-header {
				div {
					background: var(--fground-alt); 
					color: var(--bground); 
					padding: .8rem; 
					border-radius: .8rem;
					
					h2 {
						border-bottom: 0;
						text-align: left;
						
					}
					p {
						text-align: right;
					}
				}
			}
			section-matter {
				div {
					h3 {
						border-bottom: 0; 
						padding-bottom: 0;
					}
				}
			}
		}
	}
	
	section.intro {
		background-color: transparent;
		section-content {
			section-header {
				width: 100%;
				
				div {
					background: transparent; 
					
					h2 { 
						margin-bottom: .8rem; 
						border-bottom: 0; 
						padding-bottom: 0; 
						
						img { 
							width: 100%; 
							max-width: 40rem; 
							margin: 0 auto; 
							filter: drop-shadow( 0 0 .8rem var(--bground-alt)); 
							aspect-ratio: 0;
							}
					}
				}
			}
			section-matter {
				width: 100%;
				
				div {
					ul {
						display: flex; 
						flex-direction: column;
						gap: 1.6rem;
					
						li {
							background: var(--bground-alt);
							padding: .8rem;
							border-radius: .8rem;
							width: 100%; 
							max-width: 48rem; 
							margin: 0 auto; 
							display: flex; 
							flex-direction: column; 
							gap: .8rem; 
							
							h3 {
								font-size: 2rem;
								border-bottom: 0;
								background: transparent;
								width: 100%;
								display: flex;
								flex-direction: row; 
								gap: .8rem;
								justify-content: flex-start;
								align-items: center;
								margin-bottom: 0; 
								width: 100%; 
							}
							p {
								text-align: right;
								width: 100%; 
							}
						} 					
					}
				}
			}
		}
	}
	
	section.catalogue {
		section-content {
			section-header {
				div {
					h2 {
						
					}
					
				}
			}
			section-matter {
				div {
					ul {
						display: flex;
						flex-direction: column;
						gap: .8rem;
						
						li {
							display: flex; 
							flex-direction: column;
							gap: .8rem;
							width: 100%; 
							background: var(--bground-alt);  
							padding: .8rem; 
							border-radius: .8rem; 
							
							a {
								display: block; 
								width: 100%;
								
								h3 {
									display: flex; 
									flex-direction: row;
									gap: 1.6rem;
									align-items: center; 
									justify-content: flex-start;
									width: 100%; 
									margin-bottom: 0;
									
									img {
										width: 4.8rem;
										border-radius: 0;
									}
								}
							}
							p {
								text-align: right;
							}
						}
					}
					
				}
			}
		}
	}
	
	section#contact {
		section-content {
			section-header {
				div {
					
				}
			}
			section-matter {
				div {
					iframe {
						
					}
					ul {
						display: flex;
						flex-direction: row;
						
						li {
							a {
								img {
									width: 4.8rem;
									padding: .8rem;
									border-radius: 0;
								}
							}
						}
					}
				}
			}
		}
	}
}


#spaces section-content { 
	background-image: url('src/img/spaces-cover.webp'); 
}
#products section-content { 
	background-image: url('src/img/products-cover.webp'); 
}
#contact section-content { 
	background-image: url('src/img/contact-cover.webp'); 
}

@media screen and (min-width: 640px) {
	
	header {
		height: calc(100vh - 14rem);
	}
	main {
		section {
			section-content {
				padding: 1.6rem;
				
				section-header {
					div {
						padding: 1.6rem;
						border-radius: 1.6rem;
					}
				}
			}
		}
		
		section.catalogue {
			section-content {
				section-header {

				}
				section-matter {
					div {
						ul {
							li {
								padding: 1.6rem;
								border-radius: 1.6rem;
							}
						}
					}
				}
			}
		}
		
		section.intro {
			
		}
	}
}