/*
Teaser

Default teaser component.<br>
<pre>[THEME]/templates/content/node--teaser.html.twig</pre>

Markup:
  <article role="article" about="/news/first-article-news-article-type" typeof="schema:Article" class="node node--type-article node--view-mode-teaser teaser">
    <div class="node__content">
      <div class="field field--name-field-article-type field--type-entity-reference field--label-hidden field__item">News</div>
      <div class="teaser-image">
        <a href="#">
          <div class="field field--name-field-image-ref field--type-entity-reference field--label-hidden field__item">
            <article class="media media--type-image media--view-mode-landscape-sm">
              <div class="field field--name-field-media-image field--type-image field--label-hidden field__item">
                <img src="https://via.placeholder.com/320x240.png?text=320x240" width="320" height="240" class="image-style-standard-sml">
              </div>
            </article>
          </div>
        </a>
      </div>
      <div class="teaser-section">
        <h4>
          <a href="#" rel="bookmark">
            <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">First article of news article type</span>
          </a>
        </h4>
        <div class="read-duration">
          <div content="20" class="field field--name-field-read-duration field--type-integer field--label-hidden field__item">20 minutes</div>
        </div>
        <div property="schema:text" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
          <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p>
        </div>
        <a href="#" class="button button--primary button--cta-readmore button--cta-readmore--teaser btn btn-primary btn--primary-teaser" title="Read more about First article of news article type">Read more</a>
      </div>
    </div>
  </article>
                

Styleguide Molecules.3
*/
.teaser { margin-bottom: 1rem; background: #dcdcdc; overflow: hidden; position: relative; }

.teaser .node__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

@media print, screen and (min-width: 40em) { .teaser .node__content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } }

.teaser .field--name-field-article-type, .teaser .field--name-field-event-type { position: absolute; top: 0; left: 0; font-size: 0.5625rem; background: rgba(10, 10, 10, 0.4); padding: 0.25rem; z-index: 2; color: #fefefe; font-weight: 600; pointer-events: none; }

.teaser .field--name-field-article-type a, .teaser .field--name-field-event-type a { color: #fefefe; }

.teaser-image { -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-preferred-size: 200px; flex-basis: 200px; position: relative; }

.teaser-image a { display: block; }

@media print, screen and (min-width: 64em) { .teaser-image { -ms-flex-preferred-size: 260px; flex-basis: 260px; } }

.teaser .field--name-field-image-ref { height: 100%; }

.teaser .field--name-field-image-ref img { width: 100%; height: 100%; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -o-object-fit: cover; object-fit: cover; }

.teaser-section { padding: 2rem 2rem 1.5rem 1.5rem; color: #333132; -webkit-transition: color 0.25s ease-out; transition: color 0.25s ease-out; }

.teaser-section h4 a { color: #333132; -webkit-transition: color 0.25s ease-out; transition: color 0.25s ease-out; }

.teaser-section .read-duration { margin-bottom: 1rem; }

.teaser-section .button { margin-bottom: 0; -webkit-transition: border-color 0.25s ease-out; transition: border-color 0.25s ease-out; }

.teaser.node--type-article { -webkit-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; }

.teaser.node--type-article:hover, .teaser.node--type-article:focus { background: #D34728; }

.teaser.node--type-article:hover .teaser-section, .teaser.node--type-article:focus .teaser-section { color: #fefefe; }

.teaser.node--type-article:hover .teaser-section h4 a, .teaser.node--type-article:focus .teaser-section h4 a { color: #fefefe; }

.teaser.node--type-article:hover .teaser-section .button, .teaser.node--type-article:focus .teaser-section .button { border-color: #fefefe; color: #fefefe; -webkit-transition: color 0.25s ease-out; transition: color 0.25s ease-out; }

.teaser.node--type-article:hover .teaser-section .button:hover, .teaser.node--type-article:hover .teaser-section .button:focus, .teaser.node--type-article:focus .teaser-section .button:hover, .teaser.node--type-article:focus .teaser-section .button:focus { background-color: #fefefe; color: #D34728; }

/*# sourceMappingURL=../maps/teaser/teaser.css.map */