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

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

  /*font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;*/
}

a:link {
  color: grey
}

a[href*="wikipedia.org"] {
  font-style: italic;
}

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

body {

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}



h1 { 
  
  font-family: "Righteous", sans-serif;
  font-size: 8vw;
  font-style: normal;
  text-transform: uppercase;
}




blockquote {

font-style: normal;
margin-bottom: 2rem;
font-size: 200%;
margin-top: 2rem;
}

h2 {
font-family: "Righteous" , sans-serif;
font-size: 2vw
}

h3 {
  font: bold 1em sans-serif;
}

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

p + h3 {
  margin-top: 1rem;
}

cite {
  font-style: italic;
}

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

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

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

.portraits,
.produkte {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 2rem;
  
  /* hier grid einbauen! */

  /* drinnenlassen! */
  img {
    filter: grayscale(100%);
    transition: 0.3s;
  }

  figcaption {
    text-align: left;
    font-size: 90%;
    margin-bottom: 0.3rem;
    font-style: thin;
  }
}

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

.produkte {
  margin-top: 2rem;
}

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

.multicolumn {
  /* drinnenlassen! */
  

  column-width: 16em;
  column-gap: 1em;

  /* drinnenlassen! Was macht das? */
  article:not(:first-child) {
    margin: 1.2em 0 0 0;
  }

  p {
    text-align: justify;
  }
}

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

footer {
  border-top: 3px solid black;
  margin-top: 1rem;
  margin-bottom: 5rem;
}

footer h3 {
  font-weight: bold;
}

footer li {
  font-style: italic;
  text-decoration: underline;
}

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 {
    grid-template-columns: repeat(2, 1fr);
  }

  .multicolumn {
    column-count: 1;
  }
}