* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; color: #000000; text-align: center; } .page-header { display: flex; justify-content: center; background: #000000; padding: 29px 0; } .top-infocard { display: flex; justify-content: center; padding: 73px 0 0; } .top-infocard-text { max-width: 776px; line-height: 24px; } .top-infocard-subtitle { text-transform: uppercase; font-size: 32px; font-weight: 400; line-height: 39px; } .top-infocard-title { margin-bottom: 28px; text-transform: uppercase; font-size: 48px; font-weight: 500; line-height: 58px; } .top-infocard-description { font-size: 16px; line-height: 28px; text-align: justify; } .header-logo { display: block; } .main-banner { width: 100%; display: block; } .top-infocard-image { padding: 73px 0 89px 0; } .top-card-image { display: block; margin-bottom: 26px; } .top-cards { background: #FFFFFF; grid-template-columns: repeat(3, max-content); padding: 90px 0 0; display: grid; gap: 20px; justify-content: center; } .top-card { flex-direction: column; align-items: center; display: flex; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); padding: 36px 25px 26px; } .top-card-description { max-width: 300px; font-size: 16px; line-height: 24px; text-align: center; } @media screen and (max-width: 414px) { .main-banner-desktop { display: none; } .top-infocard-text { max-width: 357px; margin: auto; } .top-infocard-title { font-size: 28px; margin-bottom: 12px; line-height: 34px; } .top-infocard-subtitle { font-size: 20px; line-height: 24px; } .top-infocard-description { line-height: 24px; font-size: 16px; text-align: center; } .top-infocard-image { max-width: 239px; padding: 64px 0 90px 0; } } @media screen and (min-width: 768px) { .main-banner-mobile { display: none; } } @media screen and (min-width: 415px) and (max-width: 767px) { .main-banner-desktop { display: none; } }