.main_banner_desktop, .main_banner_mobile { width: 100%; height: auto; position: relative; } .first-content-information { display: flex; justify-content: center; align-items: center; position: relative; margin-top: 80px; margin-bottom: 95px; } .three-computers { width: 315px; height: 315px; margin-left: 124px; } .first-content-text { max-width: 766px; } .content-card-container { max-width: 1092px; height: 435px; display: flex; justify-content: space-around; align-items: center; position: relative; margin: auto; } .first-content-card { width: 100%; height: 435px; background: #F0F0F0; } .first-card, .second-card, .three-card { width: 350.33px; height: 287.95px; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); display: flex; justify-content: center; align-items: center; flex-direction: column; margin: auto; } .first-card p, .second-card p, .three-card p { width: 299px; text-align: center; margin: 27px 0; } .banner-desktop, .banner-mobile { width: 100%; height: auto; position: relative; } .grid-container { width: 100%; height: 750px; background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); top: 142px; position: relative; } .grid-container-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 884px; justify-content: space-around; margin: auto; top: -60px; position: relative; } .grid-one, .grid-two, .grid-three, .grid-four { width: 432px; height: 332px; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); } .grid-one, .grid-two, .grid-three, .grid-four { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: auto; } .grid-one p, .grid-two p, .grid-three p, .grid-four p { width: 367px; text-align: center; margin-top: 14px; margin-bottom: 66px; } @media screen and (max-width: 415px) { .main_banner_desktop { display: none; } .first-content-information { flex-direction: column; margin-top: 84px; padding-left: 31px; padding-right: 29px; margin-bottom: 158px; } .three-computers { width: 239px; height: 239px; margin-top: 137px; margin-left: 0; position: relative; } .first-content-text { max-width: 357px; } .first-content-card { width: auto; height: 966px; display: flex; justify-content: center; align-items: center; } .content-card-container { width: auto; height: 894px; flex-direction: column; justify-content: space-around; } .banner-desktop { display: none; } .grid-container-content { grid-template-columns: repeat(1, 1fr); gap: 20px; } .grid-one, .grid-two, .grid-three, .grid-four { width: 368px; height: 332px; } .grid-one p, .grid-two p, .grid-three p, .grid-four p { padding: 0 33px; font-weight: 400; font-size: 14px; line-height: 24px; text-align: center; color: #000000; } .grid-container { height: 1394px; } } @media screen and (min-width: 415px) { .main_banner_mobile { display: none; } .banner-mobile { display: none; } }