/* */ 
ul[class] {
  margin: 0; 
  padding: 0; 
  border: 0; 
}

ul[class] li {
  list-style: none; 
}

ul[class] li > * {
  margin: 0; 
}

.work_grid {
  display: grid; /* Grid Container */
  gap: 0; /* keine Abstände zwischen Griditems */
  grid-auto-flow: dense; /* 'dense' packing fills in holes earlier in the grid. */
  grid-template-columns: 100%; /* Spalten = 1 -> MOBILE */
  justify-content: center; /* Inhalt im Grid horizontal zentrieren */
  margin: 0; /* keine Abstände */
  padding: 0; /* keine inneren Abstände */
  border: 0; /* keine Rahmen */
}

/* Spalten = 4 2 1 -> DESKTOP PAD MOBILE --- grid-template-columns: repeat(1, 1fr) geht nicht mit slick-slider */

@media only screen and (min-width:900px) {
  .work_grid {
    grid-template-columns: 25% 25% 25% 25%;
  }
}

@media only screen and (min-width:500px) and (max-width:899px) {
  .work_grid {
    grid-template-columns: 50% 50%; 
  }
}

/* @media only screen and (max-width:499px){
  .work_grid {
    grid-template-columns: 100%;
  }
}*/

.work_grid .work_grid_item {
  
  align-items: stretch; /* Höhe wird gedeht -> größtes Element im grid */
  background: #000000; /* Hintergrund Schwarz */
  display: flex; /* Flexbox */
  list-style: none;
  margin: 0; 
}

.work_grid .work_grid_button {
  aspect-ratio: 16/9; /* Verhältnis -> Breite bestimmt Höhe */
  margin: 0; /* keine Abstände */
  padding: 0; /* keine inneren Abstände */
  border: 0; /* keine Rahmen */
  position:relative; /* relativ positionierbar */  
}


.work_grid .fullwidth {
  grid-column: 1 / -1;  /*Make fullwidth card span all grid columns. */
  /* width: 100%;  Make fullwidth card span all grid columns. */
  max-width: 100%;
  display: flex;
  height: auto; /* Stellt sicher, dass die Höhe sich nach dem Inhalt richtet */
}

.is-selected {
  background: black; /* Layout Hintergrund Schwarz */
  color: white; /* Layout Schrift Weiß */
}