div.teasers
{ display:flow;
}
div.teasers div.offer,
div.teasers div.company
{ padding:2pt 2pt 2pt 4pt;
  border:2pt solid rgba(255,255,255,0);
  margin-bottom:8pt;
}
div.teasers div.offer.ad-border-r
{ border:2pt solid red;
}
div.teasers div.offer.ad-fill-y
{ background:yellow;
  border:2pt solid yellow;
}
@media screen and (min-width:500pt) 
{
  div.teasers
  { display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220pt, 1fr));
    grid-auto-rows:1fr;
    grid-gap:16pt;
  }
  div.teasers div.offer
  { margin-bottom:0pt;
  }
}

div.teasers article
{ 
}



div.teasers article .teaser.image,
div.teasers .offer   article .teaser.image
div.teasers .company article .teaser.image
{ display:grid;
  grid-template-columns:10em 1fr 1fr;
  grid-template-rows:auto;
  grid-template-areas:
  'title title title '
  'img   text  text  '
  'img   space more  ';
  column-gap:8pt;
}

div.teasers article .teaser.noimage,
div.teasers .offer   article .teaser.noimage
div.teasers .company article .teaser.noimage
{ display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto;
  grid-template-areas:
  'title title '
  'text  text  '
  'space more  ';
  column-gap:8pt;
}

div.teasers article div.title
{ grid-area:title;
}
div.teasers article div.img
{ grid-area:img;
  margin-top:3pt;
}
div.teasers article div.text
{ grid-area:text;
  text-align:justify;
  padding:0;
}
div.teasers article div.more
{ grid-area:more;
  justify-self:end;
  padding:0 8pt;
}