.talents-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1rem;
  row-gap: 4rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
@media (max-width: 991px) {
  .talents-grid {
  grid-template-columns: repeat(6, 1fr);
  }
}

.talents-grid.grid-4cols {
  grid-template-columns: repeat(4, 1fr);
  column-gap:2rem;
  row-gap:0;
}

.talents-grid.grid-4cols .talent-info {
  min-height: 15rem;
}

.talent-image {
  position: relative;
  margin-bottom: 5px;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.talent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  transition: opacity 0.3s ease;
}

.talents-grid:not(.grid-4cols) .talent-image img {
  opacity: 0;
}

.talents-grid:not(.grid-4cols) .talent-image:hover img {
  opacity: 1;
}

.talents-grid.grid-4cols .talent-image img {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.talent-number {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  pointer-events: none;
}

/* Link styles */
.talent-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: block;
}

.talent-image.has-link {
  cursor: pointer;
}

.talent-image.has-link:hover .overlay {
  opacity: 0.8;
}

/* Desktop: ocultar versiones mobile */
.mobile-grid3-number,
.mobile-grid3-image,
.mobile-grid1-image,
.mobile-grid1-info {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .talents-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap:0;
    padding-top:calc(8.3rem - 1.5rem);
  }
  
  .talents-grid.grid-4cols {
    grid-template-columns: 1fr;
    padding-top:calc(6rem - 1.5rem);
  }
  
  /* Deshabilitar hover en grid 3 */
  .talents-grid:not(.grid-4cols) .talent-image:hover img {
    opacity: 0; 
  }
  
  /* Grid 3 columnas: mostrar solo versión grid3 */
  .talents-grid:not(.grid-4cols) .desktop-image,
  .talents-grid:not(.grid-4cols) .desktop-info,
  .talents-grid:not(.grid-4cols) .mobile-grid1-image,
  .talents-grid:not(.grid-4cols) .mobile-grid1-info {
    display: none;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-number,
  .talents-grid:not(.grid-4cols) .mobile-grid3-image {
    display: block;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-number {
    position: static;
    display: block;
    margin-bottom: 0.8rem;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-image {
    position: relative;
    margin-bottom:4rem;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-info {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 20;
    font-size:0.9rem;
    pointer-events: none;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-info a {
    pointer-events: auto;
  }
  
  .talents-grid:not(.grid-4cols) .mobile-grid3-info p {
    margin: 0;
  }
  
  .mobile-grid3-image {
    transition: opacity 0.3s ease;
  }
  
  /* Grid 1 columna: mostrar solo versión grid1 */
  .talents-grid.grid-4cols .desktop-image,
  .talents-grid.grid-4cols .desktop-info,
  .talents-grid.grid-4cols .mobile-grid3-number,
  .talents-grid.grid-4cols .mobile-grid3-image {
    display: none;
  }
  
  .talents-grid.grid-4cols .mobile-grid1-image,
  .talents-grid.grid-4cols .mobile-grid1-info {
    display: block;
  }
  
  .talents-grid.grid-4cols .mobile-grid1-image {
    position: relative;
    margin-bottom: 0.9rem;
  }
  
  .talents-grid.grid-4cols .mobile-grid1-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height:9rem;
  }
  
  .talents-grid.grid-4cols .mobile-grid1-info .talent-name {
    grid-column: 1 / span 2;
  }
  
  .talents-grid.grid-4cols .mobile-grid1-info .talent-social {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 400px) {
  .talents-grid:not(.grid-4cols) .mobile-grid3-info {
    font-size: 0.8rem;
  }
}