/* ------------------------------------------------------------- 06/12/2024 - *
   .b-grid-logowall
   css-tricks.com/a-grid-of-logos-in-squares/

  <ul class="b-grid-logowall | -monochrome | -framed">
    <li><a><img loading="lazy" src="-media/layout/logo.svg" alt=""></a></li>
    <li><a class="-noblank" target="_blank" href="#"><img loading="lazy" src="-media/layout/logo.svg" alt=""></a></li>
  </ul><!-- b-grid-logowall -->

/* -------------------------------------------------------------------------- */
.b-grid-logowall {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fit, minmax(calc(100px + 4vw), 1fr));
  list-style: none;
  padding: 0;
  
  > * {
  //border: 1px dashed;
    position: relative;
    display: grid;
    place-items: center;

    // aspect ratio
    &:before {      
      content: '';
      display: block;
      padding-bottom: 40%; /* Höhe der Box */
      grid-area: 1 / 1 / 2 / 2;
    }

    a {
      display: block;
      position: absolute;
      inset: 0;
      margin: auto;
      transition: 1s;

      &:hover { 
        text-decoration: none;
        transform: scale(1.05); 
      }

      &:not([href]) { cursor: default; }
    } /* a */
    
    img {
    //border: 1px dashed DeepPink;
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* absolute-center */      
      max-width:  clamp(1px, 50%, 120px);
      max-height: clamp(1px, 50%,  60px);
    } /* img */

    /* Textlogo */
    i { 
    //border: 1px dashed;
      display: block;
      margin: 15% auto;
      font-style: normal;
      font-size: smaller;  
      font-size: clamp(12px, 0.10rem + .50vw, 22px);
      letter-spacing: 1px; 
      line-height: 1.15;
    } /* i */
  } /* > * */


  /* Logos (img) monochrome (optional) */
  &.-monochrome {
    img { filter: grayscale(100%) invert(100%); }
  } /* -monochrome */
} /* .b-grid-logowall */