.bg-color { background-color: #1b1c1e; } .comp-color { background-color: #212226; } .nav-radius { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .title{ color: white; font-family: 'Poppins', sans-serif; display: flex; margin-top: 15px; margin-left: 48px; justify-content: left; text-align: left; background-color: 1b1c1e; } .bag-list{ display: flex; color: white; border-bottom: 1px solid white; background-color: 1b1c1e; font-family: 'Poppins', sans-serif; margin-bottom: 1%; justify-content: left; text-align: left; } .body-right{ margin-right: 48px; color: white; width: 30%; height: 100%; } .body-left{ margin-left: 48px; margin-right: 48px; } .button{ color: white; background-color: green; margin-top: 15px; } .full-body{ display: flex; } .info{ margin-left: 30px; } .titlesummary{ text-align: center; border-bottom: 1px solid white; margin: 10px; } @media only screen and (max-width: 1000px){ .full-body{ display: grid !important; } .body-right{ margin-left: 48px; width: 500px; } } @media (max-width: 600px){ .full-body{ font-size: 7px ; } .img{ width: 30px; height: 30px; } .info{ margin-left: 5px; } .titletr{ word-break: keep-all; } .titletrdes{ word-break: break-all; } .titlesummary{ font-size: 10px; } .body-right{ width: 504px; } .body-left{ width: 504px; } } @media (max-width : 541px){ .body-right{ width: 444px; } .body-left{ width: 444px; } } @media (max-width : 412px){ .body-right{ width: 315px; } .body-left{ width: 315px; } } @media (max-width : 415px){ .body-right{ width: 318px; } .body-left{ width: 318px; } } @media (max-width : 376px){ .body-right{ width: 280px; } .body-left{ width: 280px; } } @media (max-width : 361px){ .body-right{ width: 264px; } .body-left{ width: 264px; } } @media (max-width : 321px){ .body-right{ width: 224px; } .body-left{ width: 224px; } } @media (max-width : 281px){ .body-right{ width: 184px; } .body-left{ width: 184px; } }