.main-banner .banner-img { display: block; width: 100%; } .main-banner .banner-mobile { display: none; } .main .top-infocard { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 73px 0 178px; } .main .container-infocard-text { margin-bottom: 73px; max-width: 766px; } .main .infocard-subtitle { font-size: 32px; font-weight: 400; text-align: center; text-transform: uppercase; } .main .infocard-title { margin-bottom: 28px; font-size: 48px; font-weight: 500; text-transform: uppercase; text-align: center; } .main .infocard-description { font: 16px; line-height: 24px; } .main .top-cards { display: grid; grid-template-columns: repeat(3, max-content); gap: 21px; align-items: center; justify-content: center; padding-bottom: 80px; } .main .top-card { display: flex; align-items: center; flex-direction: column; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); padding: 26px 26px 34px; background-color: var(--white); } .main .card-img { display: block; margin-bottom: 26px; } .main .card-description { max-width: 300px; text-align: center; line-height: 24px; font-size: 16px; } /* Top-infocard */ @media (max-width: 900px) { .main .top-infocard { padding: 73px 29px 90px; } .main .container-infocard-text { margin-bottom: 65px; } .main .infocard-subtitle { font-size: 20px; } .main .infocard-title { font-size: 28px; margin-bottom: 28px; } .main .infocard-description { text-align: center; } } @media (max-width: 414px) { .main .infocard-img { max-width: 244px; width: 100%; } } /*Top-cards*/ @media (max-width: 1150px) { .main .top-cards { grid-template-columns: repeat(2, 1fr); padding: 0 26px; } .main .card-3 { grid-column-start: 1; grid-column-end: 3; } } @media (max-width: 768px) { .main .top-cards { grid-template-columns: 1fr; padding: 36px 26px; } } /* Banner-desktop / Banner-mobile*/ @media (max-width: 720px) { .main-banner .banner-desktop { display: none; } .main-banner .banner-mobile { display: block; } }