Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="DishHero">
  <div class="object-container">
    <img src="http://placehold.it/960x480"/>
    <div class="flag"></div>
  
    <div class="overlay">
      <span class="data">
        An icon here
        123
      </span>
    </div>
  </div>

  <div class="details">
    <h3 class="title">
      <a>Yada yada</a>
    </h3>
  </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

$padding-s: 10px
$padding-m: 15px
$border-color: #333

// In responsive/patterns/_media.sass

%media
  margin-bottom: $padding-s
  overflow: hidden
  zoom: 1

  > a
    @extend %media-object !optional
    display: inline-block

  %media-overlay
    position: absolute
    z-index: 1

%media-top
  @extend %media

  %media-object
    width: 100%
    margin-bottom: $padding-s
    zoom: 1
    overflow: hidden


// from responsive/modules/dish/_placeholders.sass

%hero-media-object
  %media-object
    position: relative

  .details
    @extend %media-body

  .overlay
    @extend %media-overlay
    top: 0
    bottom: 0
    right: 0
    left: 0
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.5) 100%)
    
  .data
    position: absolute
    color: #fff
    bottom: $padding-m
    right: $padding-m

  .flag
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjEgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMC40ICg4MDUzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4gICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjAzMzcxMzQlIiB5MT0iMTAwLjA2NDMzMiUiIHgyPSI1MC4wMzM3MTM0JSIgeTI9Ii0yLjI0NzA3MzI5ZS0wOSUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4gICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkVDQzU2IiBvZmZzZXQ9Ijc2LjA3JSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGMUMyNTIiIG9mZnNldD0iOTAuNDElIj48L3N0b3A+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0U4QkI0RiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICAgICAgPHBhdGggaWQ9InBhdGgtMiIgZD0iTS0wLjIsMCBMNjEuMyw2MS40IEw2MS4zLDAgTC0wLjIsMCBaIj48L3BhdGg+ICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci00Ij4gICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA3IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+ICAgICAgICAgICAgPGZlTWVyZ2U+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgPC9mZU1lcmdlPiAgICAgICAgPC9maWx0ZXI+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQmVzdF9EaXNoXy1fU3RhciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+ICAgICAgICAgICAgPGcgaWQ9IlNoYXBlLSstc3RhciI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDAgTDYxLjQsNjEuNCBMNjEuNCwwIEwwLDAgWiIgaWQ9IlNoYXBlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxnIGlkPSJzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTMiIHNrZXRjaDpuYW1lPSJtYXNrIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4gICAgICAgICAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJtYXNrIj48L2c+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguMzk5NjM2OCwxOC43IEM0OC4wOTk1NTQ3LDE4LjYgNDcuNzk5NDcyNiwxOC42IDQ3LjU5OTQxNzgsMTguNiBMMzcuOTk2Nzg5OSwxOC42IEMzNy44OTY3NjI1LDE4LjYgMzcuNjk2NzA3NywxOC41IDM3LjQ5NjY1MywxOC40IEMzNy4yOTY1OTgyLDE4LjMgMzcuMTk2NTcwOSwxOC4xIDM3LjE5NjU3MDksMTggTDM0LjM5NTgwNDQsOCBDMzQuMjk1Nzc3LDcuNyAzNC4xOTU3NDk2LDcuNCAzMy45OTU2OTQ5LDcuMSBDMzMuNzk1NjQwMSw2LjggMzMuMzk1NTMwNiw2LjMgMzIuNTk1MzExNiw2LjMgQzMxLjc5NTA5MjYsNi4zIDMxLjM5NDk4MzEsNi44IDMxLjE5NDkyODQsNy4xIEMzMS4wOTQ5MDEsNy40IDMwLjk5NDg3MzYsNy43IDMwLjg5NDg0NjIsOCBMMjguMDk0MDc5NywxOCBDMjguMDk0MDc5NywxOC4xIDI3Ljk5NDA1MjQsMTguMyAyNy43OTM5OTc2LDE4LjQgQzI3LjU5Mzk0MjksMTguNSAyNy4zOTM4ODgxLDE4LjYgMjcuMjkzODYwNywxOC42IEwxOC42Mjc0MTQyLDE4LjYgQzE4LjM3MzI0NjQsMTguNiAzNC43ODI5MjI0LDM0Ljc0MjA2NjIgMzQuNzgyOTIyNCwzNC43NDIwNjYyIEw0MS4yOTc2OTMyLDQwLjIgQzQxLjY5NzgwMjcsNDAuNSA0MS45OTc4ODQ5LDQwLjggNDIuNzk4MTAzOCw0MC44IEM0My4yOTgyNDA3LDQwLjggNDMuODk4NDA1LDQwLjYgNDQuMDk4NDU5Nyw0MC4yIEM0NC4zOTg1NDE4LDM5LjggNDQuMzk4NTQxOCwzOS40IDQ0LjM5ODU0MTgsMzkuMSBDNDQuMzk4NTQxOCwzOC43IDQ0LjI5ODUxNDUsMzguNCA0NC4xOTg0ODcxLDM4LjEgTDQwLjU5NzUwMTYsMjggTDQwLjU5NzUwMTYsMjcuOCBDNDAuNTk3NTAxNiwyNy41IDQwLjc5NzU1NjQsMjcuMSA0MC44OTc1ODM3LDI3LjEgTDQ4LjU5OTY5MTYsMjIgQzQ4Ljc5OTc0NjMsMjEuOCA0OS4wOTk4Mjg1LDIxLjcgNDkuMjk5ODgzMiwyMS40IEM0OS40OTk5MzgsMjEuMiA0OS42OTk5OTI3LDIwLjggNDkuNjk5OTkyNywyMC4yIEM0OS44MDAwMjAxLDE5LjkgNDkuNTk5OTY1MywxOS42IDQ5LjM5OTkxMDYsMTkuMyBDNDkuMDk5ODI4NSwxOC45IDQ4LjY5OTcxOSwxOC44IDQ4LjM5OTYzNjgsMTguNyBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGN0REQTkiIGZpbHRlcj0idXJsKCNmaWx0ZXItNCkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIG1hc2s9InVybCgjbWFzay0zKSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+)
    background-position: top right
    background-size: contain
    background-repeat: no-repeat
    position: absolute
    top: 0
    right: 0
    width: 62px
    height: 62px
    max-width: 35%
    max-height: 35%
    z-index: 1



// from responsive/modules/_dish_hero.sass

.DishHero
  @extend %hero-media-object
  @extend %media-top
  padding-bottom: $padding-s
  margin-bottom: $padding-m
  border-bottom: 1px solid $border-color
  position: relative
  > img
    @extend %media-object

.DishHero
  max-width: 960px
  margin: 0 auto
  
  .object-container
    @extend %media-object
    
    
  

SassMeister-output.css

.DishHero {
  margin-bottom: 10px;
  overflow: hidden;
  zoom: 1;
}
.DishHero > a {
  display: inline-block;
}
.DishHero .overlay {
  position: absolute;
  z-index: 1;
}

.DishHero > a, .DishHero > img, .DishHero .object-container {
  width: 100%;
  margin-bottom: 10px;
  zoom: 1;
  overflow: hidden;
}

.DishHero > a, .DishHero > img, .DishHero .object-container {
  position: relative;
}
.DishHero .overlay {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.5) 100%);
}
.DishHero .data {
  position: absolute;
  color: white;
  bottom: 15px;
  right: 15px;
}
.DishHero .flag {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjEgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMC40ICg4MDUzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4gICAgPHRpdGxlPlVudGl0bGVkIDg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwLjAzMzcxMzQlIiB5MT0iMTAwLjA2NDMzMiUiIHgyPSI1MC4wMzM3MTM0JSIgeTI9Ii0yLjI0NzA3MzI5ZS0wOSUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4gICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkVDQzU2IiBvZmZzZXQ9Ijc2LjA3JSI+PC9zdG9wPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGMUMyNTIiIG9mZnNldD0iOTAuNDElIj48L3N0b3A+ICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0U4QkI0RiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICAgICAgPHBhdGggaWQ9InBhdGgtMiIgZD0iTS0wLjIsMCBMNjEuMyw2MS40IEw2MS4zLDAgTC0wLjIsMCBaIj48L3BhdGg+ICAgICAgICA8ZmlsdGVyIHg9Ii01MCUiIHk9Ii01MCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjIwMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci00Ij4gICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA3IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+ICAgICAgICAgICAgPGZlTWVyZ2U+ICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPiAgICAgICAgICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+ICAgICAgICAgICAgPC9mZU1lcmdlPiAgICAgICAgPC9maWx0ZXI+ICAgIDwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQmVzdF9EaXNoXy1fU3RhciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+ICAgICAgICAgICAgPGcgaWQ9IlNoYXBlLSstc3RhciI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDAgTDYxLjQsNjEuNCBMNjEuNCwwIEwwLDAgWiIgaWQ9IlNoYXBlIiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxnIGlkPSJzdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIj4gICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTMiIHNrZXRjaDpuYW1lPSJtYXNrIiBmaWxsPSJ3aGl0ZSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4gICAgICAgICAgICAgICAgICAgIDwvbWFzaz4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJtYXNrIj48L2c+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNDguMzk5NjM2OCwxOC43IEM0OC4wOTk1NTQ3LDE4LjYgNDcuNzk5NDcyNiwxOC42IDQ3LjU5OTQxNzgsMTguNiBMMzcuOTk2Nzg5OSwxOC42IEMzNy44OTY3NjI1LDE4LjYgMzcuNjk2NzA3NywxOC41IDM3LjQ5NjY1MywxOC40IEMzNy4yOTY1OTgyLDE4LjMgMzcuMTk2NTcwOSwxOC4xIDM3LjE5NjU3MDksMTggTDM0LjM5NTgwNDQsOCBDMzQuMjk1Nzc3LDcuNyAzNC4xOTU3NDk2LDcuNCAzMy45OTU2OTQ5LDcuMSBDMzMuNzk1NjQwMSw2LjggMzMuMzk1NTMwNiw2LjMgMzIuNTk1MzExNiw2LjMgQzMxLjc5NTA5MjYsNi4zIDMxLjM5NDk4MzEsNi44IDMxLjE5NDkyODQsNy4xIEMzMS4wOTQ5MDEsNy40IDMwLjk5NDg3MzYsNy43IDMwLjg5NDg0NjIsOCBMMjguMDk0MDc5NywxOCBDMjguMDk0MDc5NywxOC4xIDI3Ljk5NDA1MjQsMTguMyAyNy43OTM5OTc2LDE4LjQgQzI3LjU5Mzk0MjksMTguNSAyNy4zOTM4ODgxLDE4LjYgMjcuMjkzODYwNywxOC42IEwxOC42Mjc0MTQyLDE4LjYgQzE4LjM3MzI0NjQsMTguNiAzNC43ODI5MjI0LDM0Ljc0MjA2NjIgMzQuNzgyOTIyNCwzNC43NDIwNjYyIEw0MS4yOTc2OTMyLDQwLjIgQzQxLjY5NzgwMjcsNDAuNSA0MS45OTc4ODQ5LDQwLjggNDIuNzk4MTAzOCw0MC44IEM0My4yOTgyNDA3LDQwLjggNDMuODk4NDA1LDQwLjYgNDQuMDk4NDU5Nyw0MC4yIEM0NC4zOTg1NDE4LDM5LjggNDQuMzk4NTQxOCwzOS40IDQ0LjM5ODU0MTgsMzkuMSBDNDQuMzk4NTQxOCwzOC43IDQ0LjI5ODUxNDUsMzguNCA0NC4xOTg0ODcxLDM4LjEgTDQwLjU5NzUwMTYsMjggTDQwLjU5NzUwMTYsMjcuOCBDNDAuNTk3NTAxNiwyNy41IDQwLjc5NzU1NjQsMjcuMSA0MC44OTc1ODM3LDI3LjEgTDQ4LjU5OTY5MTYsMjIgQzQ4Ljc5OTc0NjMsMjEuOCA0OS4wOTk4Mjg1LDIxLjcgNDkuMjk5ODgzMiwyMS40IEM0OS40OTk5MzgsMjEuMiA0OS42OTk5OTI3LDIwLjggNDkuNjk5OTkyNywyMC4yIEM0OS44MDAwMjAxLDE5LjkgNDkuNTk5OTY1MywxOS42IDQ5LjM5OTkxMDYsMTkuMyBDNDkuMDk5ODI4NSwxOC45IDQ4LjY5OTcxOSwxOC44IDQ4LjM5OTYzNjgsMTguNyBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGN0REQTkiIGZpbHRlcj0idXJsKCNmaWx0ZXItNCkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIG1hc2s9InVybCgjbWFzay0zKSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 62px;
  height: 62px;
  max-width: 35%;
  max-height: 35%;
  z-index: 1;
}

.DishHero {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #333333;
  position: relative;
}

.DishHero {
  max-width: 960px;
  margin: 0 auto;
}

SassMeister-rendered.html

<div class="DishHero">
  <div class="object-container">
    <img src="http://placehold.it/960x480"/>
    <div class="flag"></div>
  
    <div class="overlay">
      <span class="data">
        An icon here
        123
      </span>
    </div>
  </div>

  <div class="details">
    <h3 class="title">
      <a>Yada yada</a>
    </h3>
  </div>
</div>