/* ------------------------------------------------------------- 13/08/2024 - *
   .b-cards-grid 
 * -------------------------------------------------------------------------- */
.b-cards-grid {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  
	> * {
  //border: 1px dotted;
	  flex-grow: 1;
  	flex-shrink: 1;
	} /* Childs */
} /* .b-cards-grid */




/* ------------------------------------------------------------- 20/08/2024 - *
   b-card-sc
   HTML siehe -incl-card-dummy.php
 * -------------------------------------------------------------------------- */
.b-card-sc {
  --card-radius: 4px;
//border: 1px dashed;
  position: relative; 
      width: 100%;
  max-width: 486px; /* guter Wert bei 1680px (MacBook Air) 3 Cards nebeneinander */
  overflow: hidden; /* sonst kein radius sichtbar */
  border-radius: var(--card-radius);
  transition: .5s;

  .-is-toper {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: .33em 1.5em;
  }

  .-is-image { 
    height: 300px;
    background: rgba(var(--text-rgb, Fuchsia),.1) no-repeat 50% 50% / cover;
  //border: 1px solid rgba(var(--text-rgb, Fuchsia),.5);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    transition: .5s;
  } /* .-is-image */

  .-is-label {
  //border: 1px solid red;  
    z-index: 2;
    position: absolute;
    inset: 0;
    top: auto;
    padding: 3em 1.5em 1.5em 1.5em;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    color: White;
    background-image: linear-gradient(to bottom, 
      rgba(Black, 0.00)   0%,
      rgba(Black, 0.11)  20%,
      rgba(Black, 0.33)  40%,
      rgba(Black, 0.66)  60%,
      rgba(Black, 0.99) 100%,
    );

    h3 { margin: 0; }
    big {
      font-size: 125%;
      display: inline-block;
    }
  
    .b-datagrid {
      display: grid;
      grid-auto-flow: column;
      gap: 1em;      
      justify-content: space-between;
      align-items: flex-end;
    //> * { border: 1px dashed; }
    } /* b-datagrid */

    .-infolist {
      a { 
        color: inherit; 
        text-decoration: none;
        border-bottom: 1px dotted;
  
        &:hover { border-bottom-style: solid; }
      } /* a */
    } /* -infolist */
  } /* -is-label */

  &:hover {
    .-is-image,
    .-is-label big { transform: scale(1.05); }
  } /* hover */
} /* .b-card-sc */