/* #region GRILLA IMAGENES */

/* posiciones especificas del sitio de referencia (distintas a las del global) */
.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(1) {
  grid-column: 3 / span 5;
  grid-row: 1;
}

.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(2) {
  grid-column: 8 / span 5;
  grid-row: 1;
}

.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(3) {
  grid-column: span 6;
  grid-row: 2;
}

.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(4) {
  grid-column: span 6;
  grid-row: 2;
}

.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(5) {
  grid-column: 1 / span 8;
  grid-row: 3;
}

.image-gallery .image-gallery__grid > .image-gallery__item:nth-child(6) {
  grid-column: 9 / span 4;
  grid-row: 3;
}

@media (max-width: 1024px) {
  /* evita que la ultima imagen quede sola ocupando solo media fila */
  .image-gallery .image-gallery__grid > .image-gallery__item:last-child:nth-child(even) {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1025px) {
  /* "Productos y servicios" tiene 9 imagenes: la 3ra y 4ta fila necesitan posiciones propias.
     Se usa nth-child en vez de las clases penultrow/twoeq porque el script que las asigna
     (global-ypfcom-ds.js) ya no se carga en esta pagina (se cargo global-ypfcom-ds2.js en su lugar). */
  .image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid > .image-gallery__item:nth-child(5) {
    grid-column: 1 / span 5;
    grid-row: 3;
  }

  .image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid > .image-gallery__item:nth-child(6) {
    grid-column: 6 / span 2;
    grid-row: 3;
  }

  .image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid > .image-gallery__item:nth-child(7) {
    grid-column: 8 / span 5;
    grid-row: 3;
  }

  .image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid > .image-gallery__item:nth-child(8) {
    grid-column: 1 / span 6;
    grid-row: 4;
  }

  .image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid > .image-gallery__item:nth-child(9) {
    grid-column: 7 / span 6;
    grid-row: 4;
  }
}


.image-gallery .image-gallery__grid::before {
  background-image: url(../images/galeria/circulo-raya.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - -123px) -33px;
  background-size: 243px;
  overflow: hidden;
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  text-align: left;
  font: 20px/24px var(--font-din-bold);
  color: var(--Grey-Scale-50);
  background-color: var(--Primary-Brand-Colour-700);
  border-radius: var(--border-radius-large);
  padding: 40px 30px;
}

/* #region UPSTREAM */ 

.image-gallery[data-gallery-label="Upstream"] .image-gallery__grid::before{
  content: "Upstream";  
  background-image: url(../images/galeria/circulo-raya.svg);               
}

/* #endregion UPSTREAM */ 

/* #region DOWNSTREAM */ 

.image-gallery[data-gallery-label="Downstream"] .image-gallery__grid::before{
  content: "Downstream";  
  background-image: url(../images/galeria/circulo-raya.svg);               
}

/* #endregion DOWNSTREAM */ 

/* #region Gas y Energía */ 

.image-gallery[data-gallery-label="Gas y energía"] .image-gallery__grid::before{
  content: "Gas y Energía";         
}

/* #endregion Gas y Energía */ 

/* #region Productos y servicios */ 

.image-gallery[data-gallery-label="Productos y servicios"] .image-gallery__grid::before{
  content: "Productos y servicios"; 
  background-image: url(../images/galeria/circulo-raya.svg);                
}

/* #endregion Productos y servicios */

/* #endregion GRILLA IMAGENES */