Event block

<!--
  Event block with text and links on top of image on large screens.
  Accomplished by using `.c-event-block__content--overlay` and modifiers
  on the `.c-cta-block` classes.
-->
<div class="c-event-block has-giant-btm-marg">
  <h4 class="is-sr-only">The Texas Tribune Festival</h4>
  <figure>
    <a href="#" class="l-display-block">
      <img class="l-display-block l-width-full" src="/queso-ui/img/event-block/c-event-block-thumb.jpg" alt="Attendees of The Texas Tribune Festival in Moody Theater"/>
    </a>
  </figure>
  <time aria-hidden="true" class="c-event-block__tag l-display-ib has-bg-black-off t-uppercase t-lsp-b t-align-center t-weight-bold">
    <div class="t-uppercase has-text-yellow t-size-xs t-lh-s">Sept.</div>
    <div class="c-event-block__day t-size-giant has-text-white t-lh-s">26</div>
  </time>
  <div class="c-event-block__content c-event-block__content--overlay c-cta-block c-cta-block--horiz-from-bp-m l-width-full">
    <div class="c-cta-block__msg t-size-s">
      <h4 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-l">
        <a href="#" tabindex="-1">The Texas Tribune Festival</a>
      </h4>
      <p class="t-uppercase t-lsp-b t-size-xs">
        <strong>Austin, Texas | 7 p.m. - 10 p.m.</strong>
      </p>
      <p class="is-sr-only">Sept. 26</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--2 c-cta-block__btns--1-from-bp-m t-align-center l-align-end-self">
      <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
        Attend
      </a>
      <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
        Watch
      </a>
    </div>
  </div>
</div>

<!--
  Event block with text and links always below the image.
  Accomplished by leaving off the `--overlay` modifier.
-->
<div class="c-event-block has-giant-btm-marg" style="max-width: 300px;">
  <h4 class="is-sr-only">The Texas Tribune Festival</h4>
  <figure>
    <a href="#" class="l-display-block">
      <img class="l-display-block l-width-full" src="/queso-ui/img/event-block/c-event-block-thumb.jpg" alt="Attendees of The Texas Tribune Festival in Moody Theater"/>
    </a>
  </figure>
  <time aria-hidden="true" class="c-event-block__tag l-display-ib has-bg-black-off t-uppercase t-lsp-b t-align-center t-weight-bold">
    <div class="t-uppercase has-text-yellow t-size-xs t-lh-s">Sept.</div>
    <div class="c-event-block__day t-size-giant has-text-white t-lh-s">26</div>
  </time>
  <div class="c-event-block__content c-cta-block">
    <div class="c-cta-block__msg t-size-s">
      <h4 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-m">
        <a href="#" tabindex="-1">The Texas Tribune Festival</a>
      </h4>
      <p class="t-uppercase t-lsp-b t-size-xs">
        <strong>Austin, Texas | 7 p.m. - 10 p.m.</strong>
      </p>
      <p class="is-sr-only">Sept. 26</p>
    </div>
    <div class="c-cta-block__btns c-cta-block__btns--2 t-align-center">
      <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
        Attend
      </a>
      <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
        Watch
      </a>
    </div>
  </div>
</div>

<!--
  Event block in context of grid
-->
<div class="c-block-grid">
  <div class="c-event-block">
    <h4 class="is-sr-only">The Texas Tribune Festival</h4>
    <figure>
      <a href="#" class="l-display-block">
        <img class="l-display-block l-width-full" src="/queso-ui/img/event-block/c-event-block-thumb.jpg" alt="Attendees of The Texas Tribune Festival in Moody Theater"/>
      </a>
    </figure>
    <time aria-hidden="true" class="c-event-block__tag l-display-ib has-bg-black-off t-uppercase t-lsp-b t-align-center t-weight-bold">
      <div class="t-uppercase has-text-yellow t-size-xs t-lh-s">Sept.</div>
      <div class="c-event-block__day t-size-giant has-text-white t-lh-s">26</div>
    </time>
    <div class="c-event-block__content c-cta-block l-width-full">
      <div class="c-cta-block__msg t-size-s">
        <h4 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-m">
          <a href="#" tabindex="-1">The Texas Tribune Festival</a>
        </h4>
        <p class="t-uppercase t-lsp-b t-size-xs">
          <strong>Austin, Texas | 7 p.m. - 10 p.m.</strong>
        </p>
        <p class="is-sr-only">Sept. 26</p>
      </div>
      <div class="c-cta-block__btns c-cta-block__btns--2 t-align-center l-align-end-self">
        <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
          Attend
        </a>
        <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
          Watch
        </a>
      </div>
    </div>
  </div>
  <div class="c-event-block">
    <h4 class="is-sr-only">The Texas Tribune Festival</h4>
    <figure>
      <a href="#" class="l-display-block">
        <img class="l-display-block l-width-full" src="/queso-ui/img/event-block/c-event-block-thumb.jpg" alt="Attendees of The Texas Tribune Festival in Moody Theater"/>
      </a>
    </figure>
    <time aria-hidden="true" class="c-event-block__tag l-display-ib has-bg-black-off t-uppercase t-lsp-b t-align-center t-weight-bold">
      <div class="t-uppercase has-text-yellow t-size-xs t-lh-s">Sept.</div>
      <div class="c-event-block__day t-size-giant has-text-white t-lh-s">26</div>
    </time>
    <div class="c-event-block__content c-cta-block l-width-full">
      <div class="c-cta-block__msg t-size-s">
        <h4 aria-hidden="true" class="has-xxxs-btm-marg t-serif t-links-underlined-hover t-size-m">
          <a href="#" tabindex="-1">The Texas Tribune Festival</a>
        </h4>
        <p class="t-uppercase t-lsp-b t-size-xs">
          <strong>Austin, Texas | 7 p.m. - 10 p.m.</strong>
        </p>
        <p class="is-sr-only">Sept. 26</p>
      </div>
      <div class="c-cta-block__btns c-cta-block__btns--2 t-align-center l-align-end-self">
        <a class="c-button c-button--standard has-bg-blue has-text-black l-align-center-children t-size-xs" href="#">
          Attend
        </a>
        <a class="c-button c-button--standard has-bg-gray-dark has-text-white l-align-center-children t-size-xs" href="#">
          Watch
        </a>
      </div>
    </div>
  </div>
</div>