.single_student{ display: flex; .single_student_body{ display: flex; width: 100%; .student_info{ width: 32%; } .student_table{ width: 68%; } } } .student_info_card{ width: 24vw; box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px 15px ; .student_info_card_header{ display: flex; gap: 10px; img{ width: 24%; } .student_name_and_sub{ display: flex; flex-direction: column;justify-content: center; span{ color: greenyellow; } h2{ font-size: 22px; } } } .student_info_card_body{ display: flex; flex-direction: column; gap: 30px; span{ display: flex;justify-content: space-between; h4{ color: #202C4B; font-size: 20px; } p{ color: #6A7287; } } } } .student_address_card{ width: 24vw; box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px 15px ; margin-top: 30px; .student_address_card_body{ display: flex;align-items: center; gap: 15px; svg{ @include Flex; border-radius: 5px; background: #F2F4F8; width: 40px;height: 40px; padding: 7px; } p{ color: #6A7287; } } } @media screen and (max-width:1250px) { .single_student{ display: flex; .single_student_body{ display: flex;flex-direction: column !important; width: 100%; .student_info{ display: flex; width: 100%; gap: 20px; .student_address_card{ width: 50%; margin-top: 0 !important; max-height: 17vw ; } .student_info_card{ width: 50%; } } .student_table{ width: 100%; } } } }