.home-bg { background-image: url('../images/illustrations/home/autism-background.webp'); height: 100vh; min-height: 750px; background-position: right; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; color: white; } .home-bg::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: #004064E0; } .home-header { text-align: center; margin-left: 10px; margin-right: 10px; } .home-title { font-family: DancingScript; text-align: center; font-size: 100px; line-height: 1.1; font-weight: normal; padding-top: 50px; margin: 5px; } .home-headline { font-size: 24px; } .home-footer { padding-left: 48px; padding-top: 100px; } .home-contact { font-size: 16px; text-transform: uppercase; } .home-contact-content { margin-top: 20px; } .home-contact-logo { min-width: 40px; min-height: 40px; border-radius: 50%; border: 1px solid white; text-decoration: none; justify-content: center; margin-bottom: 5px; } .home-contact-text { display: inline-flex; align-items: center; color: white; margin-right: 15px; } .home-contact-link { color: white; } .home-photo { height: 400px; } .home-prestations { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 40px; align-items: stretch; text-align: left; margin-top: 50px; } .home-prestations-title { display: flex; justify-content: center; align-items: center; height: 70px; } .home-prestations-title h3 { margin-left: 20px; width: 100%; } .home-logo { height: 50px; width: 50px; border-radius: 0; } .home-map-display { width: 100%; margin-top: 20px; margin-bottom: 20px; } .home-resources { text-align: center; } .home-resources a { text-decoration: none; } .home-resources img { margin: 1%; } @media (max-width: 1000px) { .home-prestations { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-column-gap: 40px; align-items: stretch; text-align: left; } .home-resources span { display: block; } .home-resources img { width: 25%; } } @media (max-width: 795px) { .home-prestations { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 40px; align-items: stretch; text-align: left; } } @media (max-width: 735px) { .illustrated-left { float: none; } .home-photo { margin: auto; display: block; } } @media (max-width: 485px) { .home-photo { height: 100%; width: 100%; } } @media (max-width: 390px) { .home-contact-content { font-size: 14px; } .home-contact-logo { display: none; } .home-footer div div { margin-top: 12px; } } @media (max-width: 50em) { .home-title { font-size: 60px; } .home-headline { font-size: 17px; } }