* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } /* variaveis de cores */ :root { --black: #000000; --white: #FFFFFF; --grey-body: #E5E5E5; --grey: #E0E0E0; --grey-footer: #BDBDBD; } /* HEADER DA PAGINA */ header { height: 100px; width: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--black); } .header-logo { display: block; } main { background-color: var(--white); } /* BANNER DESKTOP */ .banner-img { width: 100%; display: block; } .banner-img-mobile { display: none; } /* AREA ABAIXO DO BANNER */ .container-midle { width: 100%; } .container-midle-flex { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 74px; } .container-midle-title { font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; } .container-midle-subtitle { font-weight: 400; font-size: 32px; line-height: 40px; text-transform: uppercase; } .container-midle-paragraph { width: 766px; font-weight: 400; font-size: 16px; line-height: 24px; margin: 28px 0 74px; } .container-midle-img { width: 16%; height: 16%; display: block; } /* */ @media (max-width:1024px) { /* BANNER MOBILE */ .banner-img-desktop { display: none; } .banner-img-mobile { display: block; } main{ background-color: var(--grey-footer);} /* AREA ABAIXO DO BANNER */ .container-midle { width: 100%; } .container-midle-flex { display: flex; flex-direction: column; align-items: center; justify-content: center; } .container-midle-title { font-size: 28px; line-height: 34px; } .container-midle-subtitle { font-size: 20px; line-height: 24px; } .container-midle-paragraph { width: 100%; max-width: 360px; font-size: 16px; line-height: 24px; text-align: center; } }