<div class="relative">
    <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
        <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
            <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
            <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
        </div>
    </div>    <picture class="w_100">
        <source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large" media="(min-width: 1200px)">
        <source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop" media="(min-width: 1024px)">
        <source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet" media="(min-width: 768px)">
        <source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
        <img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
    </picture>
</div>