*{ margin:0; padding:0; box-sizing: border-box; } .page-header{ display: flex; width: 100%; height: 101px; left: 0px; top: 0px; justify-content: center; align-items: center; background: #000000; } .header-logo{ width: 100%; height: 43px; } .main-banner{ width: 100%; height: auto; } @media screen and (max-width: 414px){ .desktop-hidden{ display: none; } .div-image-pc{ margin: 15% 0; } .image-pc{ width: 50%; } .infoboxes-sub-wrapper{ width: 100%; flex-direction: column; } .div-infobox{ width: 96%; height: 70%; } } @media screen and (min-width: 415px) { .mobile-hidden{ display: none; } .div-image-pc{ margin: 5% 0; } .image-pc{ width: 15%; } .infoboxes-sub-wrapper{ width: 70%; flex-direction: row; } .div-infobox{ width: 40%; height: 60%; } } .div-title{ display: flex; flex-direction: column; align-items: center; } .title-one{ width: 100%; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 32px; line-height: 39px; text-transform: uppercase; text-align: center; color: #000000; } .title-two{ width: 100%; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 48px; line-height: 58px; text-transform: uppercase; text-align: center; color: #000000; } .title-three{ width: 100%; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: #000000; } .div-image-pc{ width: 100%; display: flex; align-items: center; justify-content: center; } .infoboxes-wrapper{ display: flex; width: 100%; height: 28em; justify-content: space-around; gap: 2%; } .infoboxes-sub-wrapper{ display: flex; justify-content: center; align-items: center; gap: 2%; } .div-infobox{ border: 1px solid red; display: flex; align-items: center; justify-content: center; }