/* ------------------------------------------------------------- 30/04/2024 - *
   .b-imagegrid-41
 * -------------------------------------------------------------------------- *
  HTML
  ----
	<div class="b-imagegrid">
    <a data-fancybox="gallery" data-caption="Caption Images 1" href="//place-hold.it/1200x500/e87ff8/fff.png&bold&text=large-1200x500"><img loading="lazy" src="//place-hold.it/600x158/cccccc/fff.png&bold&text=small-600x158" alt=""></a>
    <a data-fancybox="gallery" data-caption="Caption Images 2" href="//place-hold.it/1200x500/e87ff8/fff.png&bold&text=large-1200x500"><img loading="lazy" src="//place-hold.it/600x158/cccccc/fff.png&bold&text=small-600x158" alt=""></a>
	</div>
 * -------------------------------------------------------------------------- */
.b-imagegrid-41 {
  --gridgap: 1px;

//border: 1px solid red; 
  display: grid;
  grid-gap: var(--gridgap);

  /* Image */
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
  } /* img */    

  /* Zoom <a> Icon (optional) */
	a {
		position: relative;
    display: block;
    height: 100%;
    overflow: hidden;

    &:hover img { transform: scale(1.05); }
	} /* a */

  @media (min-width: 1200px) { 
  //grid-auto-rows: calc(50px + 6vw);  
    grid-template-columns: repeat(4, 1fr); /* 4-spaltig */
  } /* @media */

  // Bilder (groß)
	> *:nth-child(1),
	> *:nth-child(8) {
  //border: 2px solid red;
    grid-row:    span 2;
    grid-column: span 2;
  } /* :nth-child() */
} /* .b-imagegrid-41 */






/* ------------------------------------------------------------- 30/04/2024 - *
   .b-imagegrid-auto
 * -------------------------------------------------------------------------- *
  HTML
  ----
	<div class="b-imagegrid-auto">
	</div>
 * -------------------------------------------------------------------------- */
.b-imagegrid-auto {
  --minmax: 240px;
  --height: calc(var(--minmax) / 1.77); /* 16:9 */
  --gridgap: 1px;

  display: grid; 
  grid-gap: var(--gridgap);

  @media (min-width: 1200px) { 
  //grid-template-columns: repeat(4, 1fr); /* 4-spaltig */
    grid-template-columns: repeat(auto-fit, minmax(var(--minmax), 1fr));
  } /* @media */

  * { margin: 0; }

  /* img & background-image */
  img,
  .b-image {    
    position: relative;
    width: 100%;
    height: var(--height);
    object-fit: cover; /* für img */
    transition: .5s;
  } /* .b-image */


  /* Image Caption (optional) */
  .b-caption {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    color: White;
    background: linear-gradient(to top, rgba(Black,.3) 5%, rgba(Black,.2) 20%, rgba(Black,.1) 40%, transparent 100%);

    > * {
    //border: 1px solid red;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: .75em;
    } /* text */
  } /* .b-caption */


  /* Double Size Bilder (optional) */
  .b-item.-doublesize {
    grid-row:    span 2;
    grid-column: span 2;
  
    img,
    .b-image { height: calc((var(--height) * 2) + var(--gridgap)); }
  } /* :nth-child() */


  /* Zoomstyle */
  a[data-fancybox] {
  //border: 1px solid red;
    position: relative;
    display: block;
    overflow: hidden;

    &:hover {
      img, 
      .b-image { transform: scale(1.05); } /* hover */
    }
	} /* a */
} /* .b-imagegrid-auto */