/*
Tile

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

Markup:
  <article role="article" about="/case-study/first-article-case-study-article-type" typeof="schema:Article" class="node node--type-article node--view-mode-tile tile">
    <div class="node__content">
      <div class="field field--name-field-article-type field--type-entity-reference field--label-hidden field__item">Case Study</div>
      <div class="tile-bg">
        <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-md">
            <div class="field field--name-field-media-image field--type-image field--label-hidden field__item">
              <picture>
                <img src="https://via.placeholder.com/640x480.png?text=640x480" width="640" height="480">
              </picture>
            </div>
          </article>
        </div>
      </div>
      <div class="tile-section">
        <h4>
          <a href="#" rel="bookmark">
            <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">First article of case study article type</span>
          </a>
        </h4>
        <div class="read-duration">
          <div content="5" class="field field--name-field-read-duration field--type-integer field--label-hidden field__item">5 minutes</div>
        </div>
        <a href="#" class="button button--primary button--cta-readmore button--cta-readmore--tile btn btn-primary btn--primary-tile" title="Read more about First article of case study article type">Read more</a>
      </div>
    </div>
  </article>

Styleguide Molecules.2
*/
.tile { position: relative; overflow: hidden; background: #0a0a0a; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 2rem; background-size: cover; background-position: center center; background-repeat: no-repeat; }

.tile .node__content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

.tile .field--name-field-article-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; }

.tile-bg { position: absolute; z-index: 0; width: 100%; height: 100%; }

.tile .field--name-field-image-ref img, .tile .field--name-field-image img { max-width: none; width: 110%; height: auto; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.8; }

@media print, screen and (min-width: 64em) { .tile .field--name-field-image-ref img, .tile .field--name-field-image img { width: auto; height: 150%; } }

.tile-hover { display: none; }

.tile-section { position: relative; z-index: 1; padding: 1rem; color: #fefefe; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.tile-section h4 a { color: #fefefe; }

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

.tile-section .button { margin-bottom: 0; -ms-flex-item-align: start; align-self: flex-start; }

.tile.node--type-article { min-height: 200px; }

@media print, screen and (min-width: 40em) { .tile.node--type-article { min-height: 260px; } }

@media print, screen and (min-width: 64em) { .tile.node--type-article { min-height: 400px; } }

.tile.node--type-sector { min-height: 280px; }

@media print, screen and (min-width: 64em) { .tile.node--type-sector .tile-hover { position: absolute; width: 100%; bottom: 0; z-index: 1; padding: 1rem; color: #fefefe; height: 40%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: rgba(211, 71, 40, 0.7); -webkit-transition: bottom 0.2s ease-in-out; transition: bottom 0.2s ease-in-out; } }

.tile.node--type-sector .tile-hover h4 { margin-bottom: 0; }

.tile.node--type-sector .tile-hover h4 a { color: #fefefe; }

.tile.node--type-sector .tile-section { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: rgba(211, 71, 40, 0.7); }

@media print, screen and (min-width: 64em) { .tile.node--type-sector .tile-section { position: absolute; top: 100%; width: 100%; -webkit-transition: top 0.2s ease-in-out 0.2s; transition: top 0.2s ease-in-out 0.2s; font-size: 0.875rem; } }

.tile.node--type-sector .button { -ms-flex-item-align: center; align-self: center; }

@media print, screen and (min-width: 64em) { .tile.node--type-sector:hover .tile-hover { bottom: -40%; }
  .tile.node--type-sector:hover .tile-section { top: 0; } }

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