
.single-grid-container {
  display: grid;
  grid-template-columns: 35% 15% 50%;
  grid-template-rows: auto;
  grid-template-areas: 
    "bild galerie farben"
    "bild galerie daten"
    "bild tabelle tabelle"
    "katalog katalog katalog";
  justify-items: stretch;
  gap: 5px;
}

.item-bild {
  grid-area: bild;
}

.item-galerie {
  grid-area: galerie;
}

.item-farben {
  grid-area: farben;
}

.item-daten {
  grid-area: daten;
}

.item-tabelle {
  grid-area: tabelle;
}

.item-katalog {
  grid-area: katalog;
}

@media only screen and (max-width: 800px) {
  .single-grid-container {
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: auto;
    grid-template-areas: 
      "bild galerie"
      "farben farben"
      "tabelle tabelle"
      "daten daten"
      "katalog katalog";
  }
}

@media only screen and (max-width: 600px) {
  .single-grid-container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas: 
      "bild"
      "farben"
      "tabelle"
      "daten"
      "galerie"
      "katalog";
  }

  .item-farben {
    text-align: center;
  }

  .single-thumb {
    width: 45%
  }
}
