/*gallery 3x crop*/
  .projects-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  
  .projects-el {
    flex: 1 1 calc((100% - 80px) / 3); 
    max-width: calc((100% - 80px) / 3); 
    text-align: left;
  }
  
  @media (max-width: 1400px) {
    .projects-el {
      flex: 1 1 calc((100% - 40px) / 2); 
      max-width: calc((100% - 40px) / 2);
    }
  }
  
  @media (max-width: 800px) {
    .projects-el {
      flex: 1 1 100%; 
      max-width: 100%;
      margin-top: 0px;
    }
  }
  
  .projects .image-container {
    width: 100%;  
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    flex-basis: auto; /* Ensures the container doesn't shrink */
    min-width: 0; /* Prevents flexbox from overriding width */
  }
  
  .projects .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-in-out;
  }
  
  .projects .image-container a:hover{
    filter: none;
    -webkit-filter: none;
  }
  
  .projects .image-container:hover img.transform-zoom{
    transform: scale(1.04); 
  }
    
  /*gallery flexible (not crop)*/
  /*-------------------------------------------------*/

  
  .gallery-flex {
    display: flex;
    flex-wrap:wrap;
    gap: 40px;
  }
  
  .gallery-el-3 {
    flex: 1 1 calc((100% - 80px) / 3); 
    max-width: calc((100% - 80px) / 3); 
  }
  
  .gallery-el-2 {
    flex: 1 1 calc((100% - 40px) / 2); 
    max-width: calc((100% - 40px) / 2); 
  }
  
  .gallery-el-1 {
    flex: 1 1 100%; 
    max-width: 100%; 
  }
  
  @media (max-width: 800px) {
    .gallery-el-3 {
      flex: 1 1 calc((100% - 10px) / 2); 
      max-width: calc((100% - 10px) / 2); 
    }
    .gallery-el-2 {
      flex: 1 1 100%; 
      max-width: 100%;
    }
    .gallery-flex{
      gap: 10px;
    }
  }
  
  .gallery img {
    width: 100%;  
  }
  
  /*gallery square, crop*/
  /*-------------------------------------------------------------------*/
  
  .gallery-square-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .gallery-square-el {
    flex: 1 1 calc((100% - 40px) / 4); 
    max-width: calc((100% - 40px) / 4); 
    text-align: left;
  }

  .gallery-square-el-4-1 {
    flex: 1 1 calc((100% - 40px) / 4); 
    max-width: calc((100% - 40px) / 4); 
    text-align: left;
  }

  .gallery-square-el-3 {
    flex: 1 1 calc((100% - 30px) / 3); 
    max-width: calc((100% - 30px) / 3); 
    text-align: left;
  }
  
  @media (max-width: 800px) {
    .gallery-square-el{
      flex: 1 1 calc((100% - 20px) / 2); 
      max-width: calc((100% - 20px) / 2); 
    }
    .gallery-square-el-3{
      flex: 1 1 100%; 
      max-width: 100%; 
    }
    .gallery-square-el-4-1{
      flex: 1 1 100%; 
      max-width: 100%; 
    } 
  }
  
  .gallery-square .image-container {
    width: 100%;  
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    flex-basis: auto; /* Ensures the container doesn't shrink */
    min-width: 0; /* Prevents flexbox from overriding width */
  }
  
  .gallery-square .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*------------------------------------------------------------------------*//*gallery crop*/
  /*-------------------------------------------------------------------*/
  
  .gallery-crop-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  @media (max-width: 800px) {
    .gallery-crop-flex {
      gap: 10px;
    }
  }
  
  .gallery-crop-el-2 {
    flex: 1 1 calc((100% - 10px) / 2); 
    max-width: calc((100% - 10px) / 2); 
  }

  .gallery-crop-el-3 {
    flex: 1 1 calc((100% - 20px) / 3); 
    max-width: calc((100% - 20px) / 3); 
  }

  @media (max-width: 1400px) {
    .gallery-crop-el-3{
      flex: 1 1 calc((100% - 10px) / 2); 
      max-width: calc((100% - 10px) / 2); 
    }
  }

  @media (max-width: 800px) {
    .gallery-crop-el-3, .gallery-crop-el-2{
      flex: 1 1 100%;
      max-width: 100%; 
    }
  }
  
  .gallery-crop .image-container {
    width: 100%;  
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    flex-basis: auto; /* Ensures the container doesn't shrink */
    min-width: 0; /* Prevents flexbox from overriding width */
  }
  
  .gallery-crop .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  /*------------------------------------------------------------------------*//*gallery , crop, fullsreen, no gap*/
  /*-------------------------------------------------------------------*/
  
  .gallery-cropfull-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: -1px; /* Helps fix tiny gaps */
  }

  @media (max-width: 800px) {
    .gallery-cropfull-flex {
      gap: 0px;
      margin: -2px; /* Helps fix tiny gaps */
    }
  }
  
  .gallery-cropfull-el-2 {
    flex: 1 1 calc(100% / 2);
    max-width: calc(100% / 2);
  }

  .gallery-cropfull-el-3 {
    flex: 1 1 calc(100% / 3);
    max-width: calc(100% / 3);
  }


  @media (max-width: 800px) {
    .gallery-cropfull-el-2, .gallery-cropfull-el-3{
      flex: 1 1 100%;
      max-width: 100%; 
    }
  }
  
  .gallery-cropfull .image-container {
    width: 100%;  
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    flex-basis: auto; /* Ensures the container doesn't shrink */
    min-width: 0; /* Prevents flexbox from overriding width */
  }
  
  .gallery-cropfull .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }


   /*------------------------------------------------------------------------*//*gallery , crop, fullsreen, vertikal no gap*/
  /*-------------------------------------------------------------------*/
  
  .gallery-cropfullver-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: -1px; /* Helps fix tiny gaps */
  }

  @media (max-width: 800px) {
    .gallery-cropfullver-flex {
      gap: 0px;
      margin: -2px; /* Helps fix tiny gaps */
    }
  }
 
  .gallery-cropfullver-el-5 {
    flex: 1 1 calc(100% / 5);
    max-width: calc(100% / 5);
  }

  @media (max-width: 800px) {
    .gallery-cropfullver-el-5{
      flex: 1 1 calc(100% / 2);
      max-width: calc(100% / 2);
    }
  }

  .gallery-cropfullver-el-4 {
    flex: 1 1 calc(100% / 4);
    max-width: calc(100% / 4);
  }

  @media (max-width: 800px) {
    .gallery-cropfullver-el-4{
      flex: 1 1 calc(100% / 2);
      max-width: calc(100% / 2);
    }
  }
  
  .gallery-cropfullver .image-container {
    width: 100%;  
    aspect-ratio: 9 / 16; 
    overflow: hidden;
    flex-basis: auto; /* Ensures the container doesn't shrink */
    min-width: 0; /* Prevents flexbox from overriding width */
  }
  
  .gallery-cropfullver .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }