* { margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Inter', sans-serif; color: #000000; } .header-page{ background: #000000; display: flex; justify-content: center; padding: 28px 0; } .top-banner{ width: 100%; display: block; } .top-infocard{ display: flex; align-items: center; text-align: center; justify-content: center; flex-direction: column; } .top-infocard-text{ width: 40%; padding: 72px 0; } .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; } .top-infocard-description{ font-weight: 400; font-size: 16px; line-height: 24px; } .top-infocard-image{ width: 17%; padding: 0 0 178px; } .top-cards{ display: grid; grid-template-columns: repeat(3, 18%); gap: 20px; justify-content: center; padding: 0 0 80px; } .top-card{ display: flex; flex-direction: column; align-items: center; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } .top-card-image{ display: block; padding: 36px 124px 0; } .top-card-description{ font-size: 16px; line-height: 24px; text-align: center; padding: 26px; } .mid-banners{ background: #E0E0E0; margin: 0 0 192px; } .mid-banner-wrapper{ display: grid; grid-template-columns: repeat(3, 29%); justify-content: center; gap: 38px; position: relative; top: 62px; } .mid-banner-image{ width: 100%; } .bottom-cards{ display: grid; grid-template-columns: repeat(4, 23%); gap: 16px; justify-content: center; padding: 0 0 108px; } .bottom-card{ display: flex; flex-direction: column; align-items: center; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .bottom-card-image{ display: block; padding: 36px 164px 0; } .bottom-card-description{ font-size: 16px; line-height: 24px; text-align: center; padding: 16px 32px 66px; }