:root {

  --bg-img1 : url("../img/general/backgrounds/dlts_banner_new.jpg");
  --bg-img2 : url("../img/general/hex1_inv.jpg");
  --bg-img3 : url("../img/general/ori/grid-3230205_dark_LN.jpg");

  --bg-banner-1 : url("../img/promo/DLTS_IT_Services.svg");
  --logo : url("../img/Logo_2D.svg");
}

[data-theme="light"]
{
  --logo : url("../img/Logo_2D.svg");
}
[data-theme="light-dark"]
{
  --logo : url("../img/Logo_2D.svg");
}

[data-theme="dark"], 
[data-theme="dark-light"] {
  --logo : url("../img/Logo_2D_inv.svg");
}


.img-logo {
    content : var(--logo);
    display: block;
  }

.lanes2 div:nth-child(2n+1 of .bg-img)
,.lanes3 div:nth-child(3n+1 of .bg-img) 
,.lanes4 div:nth-child(4n+1 of .bg-img) {
  background-image: var(--bg-img1);
}

.lanes2 div:nth-child(2n+2 of .bg-img)
,.lanes3 div:nth-child(3n+2 of .bg-img)
,.lanes4 div:nth-child(4n+2 of .bg-img) {
  background-image: var(--bg-img2);
}

.lanes3 div:nth-child(3n of .bg-img) 
,.lanes4 div:nth-child(4n+3 of .bg-img) {
  background-image: var(--bg-img3);
}

.bg-img {
  background-attachment: fixed;
  background-size: cover;
}

.thumb {

  img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5%;
  }

  p{
    text-align: center;  
    margin-top:auto;
  }
}

.grid > .left-img {
  order: -1;
}

.grid > .right-img {
  order: 99;
}

@media (max-width: 1000px) {
.grid > .right-img {
  order: -1;
}
}

/* 2. Each “card” */
.gallery-item {
  /* base width, will shrink/grow */
  flex: 1 1 200px;    
  display: flex;
  flex-direction: column;
  /* border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fafafa;
  */
}

/* 3. Wrapper for the image to enforce a fixed aspect-ratio */
.gallery-item {
  /* 
       position: relative;
  */


  p{
  text-align: center;  
  /*margin-top: auto; */
      padding: 0.5rem;
  }
}

/* 4. The actual image—fills the wrapper, keeps aspect, crops if necessary */
.img-wrap img {
  width: 100%;
  height: 300px; /*100 %*/
  object-fit: cover;
    border-radius: 5%;
}

.banner {
  
  background-image: var(--bg-banner-1);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height:150px;
}
 
@media(min-width: 700px){
  .banner {
    height: 350px;
  }
} 

@media(max-width: 350px){
  .banner {
    height: 100px;
  }
} 

 /*
.showcase { 
  div.thumb:hover {
    flex:5 !important;
    background: white;
  } 
}
*/

.card-static .thumb > img {
  /*max-width: 128px;*/
}