* { margin: 0; padding: 0; box-sizing: border-box; } .Page-Header{ display: flex; justify-content: center; padding: 30px 0; background: #000000; } .main-banner{ display: block; width: 100%; } .Header-Logo{ display: block; } .TopInfocard{ display: flex; align-items: center; justify-content: center; padding: 74px 0 74px; } .TopInfocardText{ display: flex; justify-content: center; align-items: center; flex-direction: column; height: 182px; max-width: 766px; } .TopInfocardSubtitle{ width: 100%; font-weight: 400; font-size: 32px; line-height: 40px; max-width: 220px; max-height: 40px; } .TopInfocardTitle{ font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; } .TopInfocardDescription{ font-weight: 400; text-align: center; padding: 0 52px; font-size: 16px; line-height: 24px; } .PcContainer{ width: 100%; display: flex; justify-content: center; align-items: center; } .ImageTop{ max-width: 316px; max-height: 352px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1023px) { .MainBannerDesktop{ display: none; } .TopInfocard{ padding: 144px 0 66px; } .ImageTop{ max-width: 240px; max-height: 240px; } .TopInfocardSubtitle{ font-size: 20px; max-width: 138px; max-height: 24px; line-height: 24px; } .TopInfocardTitle{ font-size: 28px; line-height: 34px; } .TopInfocardDescription{ font-size: 16px; line-height: 24px; padding: 0 28px; max-width: 358px; max-height: 116px; } } @media screen and (min-width: 1024px) { .MainBannerMobile{ display: none; } } /* Concertar medidas futuramente */ @media screen and (min-width: 2500px) { .TopInfocardText{ max-width: 1532px; height: 364px; } .TopInfocardSubtitle{ font-size: 40px; } .TopInfocardTitle{ font-size: 60px; } .TopInfocardDescription{ line-height: 30px; font-size: 38px; } .ImageTop{ max-width: 630px; max-height: 704px; height: 704px; } }