.single_student { display: flex; .single_student_body { display: flex; width: 100%; .student_info { width: 32%; } .student_table { width: 68%; } } } .info_card, .address_card, .attachments_card { width: 24vw; box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px 15px; p { color: #6A7287; } .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; } } } .info_card_body { display: flex; flex-direction: column; gap: 30px; span { display: flex; justify-content: space-between; h4 { color: #202C4B; font-size: 20px; } } .info_card_button{ background: var(--primary); color: var(--white); padding: 25px 0px; border-radius: 9px; } } } .address_card { margin-block: 30px; .address_card_body { display: flex; flex-direction: column; align-items: center; div{ margin-block: 20px; gap: 15px; display: flex !important; } svg { @include Flex; border-radius: 5px; background: #F2F4F8; width: 40px; height: 40px; padding: 7px; } } } @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; .address_card { width: 50%; margin-block: 0 !important; max-height: 17vw; } .info_card { width: 50%; } } .student_table { width: 100%; } } } }