/* ================================ normalize ================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}
img,
picture,
video {
  width: 100%;
  height: auto;
}
html {
  font-family: "inter", sans-serif;
  background-color: #fff;
  /* Silbentrennung – drinnen lassen! */
  hyphens: auto;
}

/* ================================== typo ================================== */

body {
  color: grey;
}

h1 {
  font-family: "Righteous", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(30px, 8vw, 60px);
  color: rgb(70, 70, 70);
}

blockquote {
}

h2 {
  font-family: "Righteous", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 2em;
  color: rgb(70, 70, 70);
}

h3 {
  font-family: "inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: rgb(70, 70, 70);
}

/* drinnenlassen! */
p + p {
  text-indent: 1.5em;
}

cite {
}

/* ================================ main ================================ */

/* drinnenlassen! */
main {
  width: clamp(320px, 90%, 1400px);
  margin: 3.5rem auto;
  position: relative;
}

/* ================================ portraits ================================ */

.portraits,
.produkte {
  /* hier grid einbauen! */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
  .portraits,
  .produkte {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* drinnenlassen! */
img {
  filter: grayscale(100%);
  transition: 0.3s;
}

figcaption {
  color: rgb(182, 182, 182);
  font-weight: 300;
}

a:link {
  color: rgb(182, 182, 182);
  font-style: italic;
}

/* drinnenlassen! Was macht das? */
.produkte img:hover {
  filter: none;
}

/* ================================ multicolumn ================================ */

.multicolumn {
  /* drinnenlassen! */
  text-align: justify;

  /* mehrspaltigen Bereich hier definieren */
  column-width: 16em;
  /* drinnenlassen! Was macht das? */
  article:not(:first-child) {
    margin: 1.2em 0 0 0;
  }
}

/* ================================ footer ================================ */

footer {
}

ul {
  font-size: 80%;
}

/* ================================ media-query, kleine Screens ================================ */

/* Umbruch der 4 Bilder in 2-spaltiges Layout */
@media (max-width: 750px) {
  /* Blockquote nicht mehr ganz so groß */
  blockquote {
    font-size: 133%;
  }

  .portraits,
  .produkte {
    /* was muss hier rein? */
  }
}