.dtg-grid{ display:flex; flex-wrap:wrap; gap:10px; flex-direction:row;margin:0 auto;}
.dtg-grid .dtg-grid-item{
	border: 1px solid #ccc;
    width: auto;
	background-color:#fff;
}
.dtg-grid-item img{     height: 150px !important;
    width: 150px;
    object-fit: contain;
    cursor: pointer; }
.dtg-lightbox{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; flex-direction: column;   transition: opacity 0.5s ease; z-index: 999;}

.dtg-lightbox img{ max-width:90%; max-height:80%; }
.dtg-lightbox .dtg-lb-close{     position: absolute;
     font-size: 30px;
    color: white;
    cursor: pointer;
    top: -45px;
    right: 0;
    border: none;
    width: auto;}
.dtg-lightbox.open{ display:flex; }
.dtg-lb-controls{
   display: flex;
    flex-direction: row;
    margin-top: 25px;
}


/* === Responsive ajustes === */



@media (min-width: 220px) {
    .dtg-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 20px 0;
		 width: auto;
		max-width:100%;
    }
}

@media (min-width: 540px) {
    .dtg-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 3fr)) ;
        max-width: 500px;
        width: 100%;
    }
}

@media (min-width: 720px) {
    .dtg-grid {
        max-width: 680px;
        width: 100%;
		margin:0 auto;
    }
}

@media (min-width: 750px) {
    .dtg-grid {
        grid-template-columns: repeat(auto-fit, minmax(118px, 5fr));
        width: 750px;
    }
}


@media (min-width: 1024px) {
    .dtg-grid {
         display:flex; flex-wrap:wrap; gap:10px; flex-direction:row;
        width: 100%;
		
        max-width: 100%;
    }
}



@media (max-width: 768px) {
  .dtg-grid {
    gap: 8px;
	  
  }

  .dtg-lightbox img {
    width: 95%;
    max-width: 100%;
  }

  .dtg-caption {
    font-size: 14px;
  }

  .dtg-lightbox .close {
    font-size: 26px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  .dtg-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dtg-lightbox img {
    width: 100%;
  }
}