/**
** Theme Image Grid
 * This file contains the styles for the image grid in the theme.
*/

body:not(.page-id-3500) .wp-block-uagb-container.cont-img-grid.background-dark {
  margin-bottom: 0 !important;
}

.wp-block-uagb-container.cont-img-grid .uagb-container-inner-blocks-wrap {
  width: 1607px !important;
  max-width: 90vw !important;
}

.wp-block-uagb-container.image-grid {
  position: relative;
}

.wp-block-uagb-container.image-grid::after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 58.8%;
}

.wp-block-uagb-container.image-grid > * {
  position: absolute !important;
  filter: grayscale(1) brightness(0.8) contrast(110%);
}

/** Headline **/
.wp-block-uagb-container.cont-img-grid .col-headline {
  position: absolute;
  z-index: 99;
}

.wp-block-uagb-container.cont-img-grid .col-headline p {
  color: var(--ast-global-color-4) !important;
  font-family: var(--mainfont);
  font-size: var(--h2-font-size);
  font-style: normal;
  font-weight: 500;
  line-height: 0.69;
}

/** Images **/
.wp-block-uagb-container.image-grid .image-grid-img-1 {
  width: 26.93% !important;
  left: 0;
  top: 9.34%;
}

.wp-block-uagb-container.image-grid .image-grid-img-2 {
  width: 21.05% !important;
  left: 33.04%;
  top: 17.18%;
}

.wp-block-uagb-container.image-grid .image-grid-img-3 {
  width: 38.77% !important;
  right: 2.99%;
  top: 0;
}

.wp-block-uagb-container.image-grid .image-grid-img-4 {
  width: 23.58% !important;
  left: 6.47%;
  bottom: 16.28%;
}

.wp-block-uagb-container.image-grid .image-grid-img-5 {
  width: 20.97% !important;
  right: 36.12%;
  bottom: 0;
}

.wp-block-uagb-container.image-grid .image-grid-img-6 {
  width: 31.55% !important;
  right: 0;
  bottom: 10.33%;
}

.wp-block-uagb-container.image-grid img {
  object-fit: cover;
}

/* auf employer branding seite */
.post-3500 .wp-block-uagb-container.background-dark.cont-img-grid {
  padding: calc(var(--gap-m) + var(--gap-l)) 0 !important;
}

/*----------------- Responsive -------------*/

@media (max-width: 1100px) {
  .wp-block-uagb-container.cont-img-grid .col-headline p {
    line-height: 1em;
  }
}

/** Mobile Grid **/
.wp-block-uagb-container.cont-img-grid.cont-img-grid-mobile img {
  filter: grayscale(100%) brightness(80%);
}
.wp-block-uagb-container.cont-img-grid.cont-img-grid-mobile .col-headline {
  margin-top: 50%;
}

/*
.wp-block-uagb-container.cont-img-grid .col-imgs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6,
      calc(var(--gap-l) + var(--gap-xl)));
  4 Zeilen mit fester Höhe -> 950px / 6 = 159px  
}
*/
/*
.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image {
  overflow: hidden;
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.5s ease;
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}


/* Positionierung der einzelnen Bilder im Grid */
/*
.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(1) {
  grid-column: 1 / 4;
grid-row: 1 / 4;
/* Zeile 1 bis 4
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(2) {
  grid-column: 3 / 6;
  /* Spalte 3 bis 6 
grid-row: 2 / 5;
/* Zeile 2 bis 5 
z-index: 2;
/* Bleibt im Vordergrund 
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(3) {
  grid-column: 6 / 9;
  /* Spalte 6 bis 9 
  grid-row: 0 / 4;
  /* Zeile 1 bis 4 
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(4) {
  grid-column: 1 / 3;
  /* Spalte 1 bis 3 
  grid-row: 4 / 6;
  /* Zeile 4 bis 6 
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(5) {
  grid-column: 3 / 5;
  /* Spalte 3 bis 5 
  grid-row: 5 / 7;
  /* Zeile 5 bis 7 
}

.wp-block-uagb-container.cont-img-grid .col-imgs .wp-block-uagb-image:nth-of-type(6) {
  grid-column: 5 / 9;
  /* Spalte 5 bis 9 
  grid-row: 4 / 7;
  /* Zeile 4 bis 7 
}*/