/* ------------------------------------------------------------- 28/05/2024 - *
   .b-cardgrid
 * -------------------------------------------------------------------------- *
  HTML
  ----
<section class="b-cardgrid">
  <div class="card">
    <div class="card__img">  
      <img src="https://images.unsplash.com/photo-1486299267070-83823f5448dd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="Big Ben">
      <div class="card__overlay"><p class="card__titel"><b>Headline</b><br><smaller>Subline</smaller></p></div>
    </div><!-- card__img -->
  </div><!-- card -->

  <div class="card">
    <div class="card__img">  
      <img src="https://images.unsplash.com/photo-1581010864468-c972b8705439?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Eiffel Tower">
      <div class="card__overlay"><p class="card__titel"><b>Headline</b><br><smaller>Subline</smaller></p></div>
    </div><!-- card__img -->
  </div><!-- card -->

  <div class="card">
    <div class="card__img">  
      <img src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1096&q=80" alt="Colosseum">
    </div><!-- card__img -->
  </div><!-- card -->

  <div class="card">
    <div class="card__img">  
      <img src="https://images.unsplash.com/photo-1581473483413-313a5afffb08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=714&q=80" alt="Pisa Tower">
      <div class="card__overlay"><p class="card__titel"><b>Headline</b><br><smaller>Subline</smaller></p></div>
    </div><!-- card__img -->
  </div><!-- card -->

  <div class="card">
    <div class="card__img">  
      <img src="https://images.unsplash.com/photo-1585155967849-91c736589c84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80" alt="">
      <div class="card__overlay"><p class="card__titel"><b>Headline</b><br><smaller>Subline</smaller></p></div>
    </div><!-- card__img -->
  </div><!-- card -->
</section>
 * -------------------------------------------------------------------------- */

@mixin mQ($px) {
  @media screen and (max-width: $px) { @content; }
}

.b-cardgrid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 25% 30% 15% 25%;
//grid-template-rows: 50% 50%;
//height: 80vh;
  min-height: 460px;
  
  @include mQ(690px) { height: 65vh; }
  @include mQ(470px) {
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:  repeat(3, 35%);
  }
  
  .card {
    @include mQ(470px) { grid-column: span 1; }
    @include mQ(690px) { &:nth-child(6) { grid-column: 2/4; grid-row:  2/3; } }    
    @include mQ(470px) { &:nth-child(5) { grid-column: span 2; } }
    
    &:nth-child(2) { grid-column: 2/3; grid-row: span 2;  @include mQ(690px) { grid-column: span 1; grid-row: span 1; } }    
    &:nth-child(3) { grid-column: span 2;                 @include mQ(690px) { grid-column:  2/4; grid-row:  1/2; } }
     
    .card__img {
      position: relative;
      height: 100%;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1em;
      }      
    }
           
    .card__titel {
      font-size: clamp(1rem, 0.8750rem + 0.6250vw, 1.5rem);
      line-height: 1;
       margin: 0;
      color: White;    
    }
    
    .card__overlay {
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding:  clamp(0.938rem,5vw,1.563rem);
      background:  linear-gradient(0deg, rgb(0 0 0 / 57%) 0%, rgb(255 255 255 / 0%) 100%);
      border-radius: 1em;
    } /* .card__overlay */
  }
}