.px-4.py-16.mx-auto.sm:max-w-xl.md:max-w-full.lg:max-w-screen-xl.md:px-24.lg:px-8.lg:py-20
  .flex.flex-col.max-w-screen-lg.overflow-hidden.bg-white.border.rounded.shadow-sm.lg:flex-row.sm:mx-auto
    .relative{:class => "lg:w-1/2"}
      -if @teacher.picture_url
        = image_tag @teacher.picture_url, class: "object-cover w-full lg:absolute h-80 lg:h-full"
    .flex.flex-col.justify-center.p-8.lg:p-16.lg:pl-10{:class => "lg:w-1/2"}
      %h5.mb-3.text-3xl.font-extrabold.leading-none.sm:text-4xl
        = @teacher.name
      .mb-8.text-gray-800
        .prose= markdown(@teacher.bio)