*{ margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; } /* CabeƧalho */ .header-logo { width: 100%; display: block; } .page-header { display: flex; padding: 28px 0; justify-content: center; background: #000; } /* Banner principal */ .main-banner{ width: 100%; display: block; } /* Primeiro infocard */ .top-infocard, .top-infocard-subtitle, .top-infocard-title, .top-infocard-description { display: flex; flex-direction: column; align-items: center; text-align: center; } .top-infocard-text { width: 40%; max-width: 100%; margin: 72px 0 72px; } .top-infocard-subtitle { font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; } .top-infocard-title { font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; margin-bottom: 22px; } .top-infocard-description { font-size: 16px; line-height: 24px; } .top-infocard-figure { width: 100%; } .top-infocard-image { width: 16%; display: block; } /* Responsividade */ @media screen and (min-width: 821px) { .main-banner-mobile { display: none; } } @media screen and (max-width: 820px) { .main-banner-desktop { display: none; } .top-infocard-text { width: 86%; max-width: 100%; margin: 68px 0 68px; } .top-infocard-subtitle { font-size: 20px; line-height: 24px; } .top-infocard-title { font-weight: 500; font-size: 28px; line-height: 34px; } .top-infocard-image { width: 58%; } }