:root {
  /* ## Colors */
  /* ### Primary */
  --purple-50: hsl(260, 100%, 95%);
  --purple-300: hsl(264, 82%, 80%);
  --purple-500: hsl(263, 55%, 52%);
  /* ### Neutral */
  --white: hsl(0, 0%, 100%);
  --grey-100: hsl(214, 17%, 92%);
  --grey-200: hsl(0, 0%, 81%);
  --grey-400: hsl(224, 10%, 45%);
  --grey-500: hsl(217, 19%, 35%);
  --dark-blue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
  /* ## Typography */
  /* ### Body Copy */
  --font-size: 13px;
  /* ### Fonts */
--family: 'Barlow Semi Condensed', sans-serif;
--font-weight-semibold: 500;
--font-weight-bold: 600;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /*
  margin: 0;
  padding: 0;
  */
}

body {
  margin: 1.5rem; /* spazio esterno attorno al body, utile per non far aderire i contenuti ai bordi */
  background-color: var(--grey-100);
  font-family: var(--family);
  font-size: var(--font-size); 
  min-height: 100vh; /* altezza minima pari all’intera finestra del browser */
  display: grid; /* il body diventa un contenitore grid */
  place-content: center; /* centra il contenuto della griglia sia in verticale che in orizzontale */
  place-items: center; /* centra gli elementi figli della griglia */
  gap: 3.5rem; /* spazio tra gli elementi della griglia */
  line-height: 1.5; /* interlinea del testo per migliorare la leggibilità */
  -webkit-font-smoothing: antialiased; /* migliora la resa dei font su browser WebKit (Safari, Chrome) */
}

h1 {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

.p-article {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
}

p {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.image-text {
  display: flex;
  align-items: center;
  gap: 1rem; /* spazio tra immagine e testi */
}

.image-text img {
  border-radius: 2rem;
  padding: 1px;
  background-color: var(--white);
}

.image-text h1,
.image-text h2 {
  margin: 0;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

/* ---main--- */

.main-grid {
  display: grid;
  gap: 2rem;
  max-width: 450px;
}

.article-Daniel {
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--white);
  background-color: var(--purple-500);
}

.article-Jonathan {
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--white);
  background-color: var(--grey-500);
}

.article-Jeanette {
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--black);
  background-color: var(--white);
}

.article-Patrick {
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--white);
  background-color: var(--dark-blue);
}

.article-Kira {
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.2);
  color: var(--black);
  background-color: var(--white);
}

.attribution { 
  font-size: 11px; 
  text-align: center; 
}

.attribution a { 
  color: hsl(228, 45%, 44%); 
}

@media (min-width: 680px) {
  .main-grid {
    grid-template-rows: repeat(1, 2fr); /* la griglia passa a 2 colonne uguali */
    max-width: 950px; /* larghezza massima del contenitore */
  }
}

/* breakpoint grande: da 900px in su */
@media (min-width: 900px) {
  .main-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonne uguali */
    gap: 2rem;
    max-width: 1440px;
    margin: 0 auto; /* centra e blocca la larghezza non oltre i 1440px, come impostato */
  }

  /* DANIEL → 2 colonne */
  .article-Daniel {
    grid-column: 1 / 3; /* colonne 1 e 2 */
    grid-row: 1 / 2;    /* prima riga */
  }

  /* JONATHAN → 1 colonna */
  .article-Jonathan {
    grid-column: 3 / 4; /* colonna 3 */
    grid-row: 1 / 2;    /* prima riga */
  }

  /* KIRA → 1 colonna, alta 2 righe */
  .article-Kira {
    grid-column: 4 / 5; /* colonna 4 */
    grid-row: 1 / 3;    /* occupa riga 1 e riga 2 */
  }

  /* JEANETTE → 1 colonna */
  .article-Jeanette {
    grid-column: 1 / 2; /* colonna 1 */
    grid-row: 2 / 3;    /* seconda riga */
  }

  /* PATRICK → 2 colonne */
  .article-Patrick {
    grid-column: 2 / 4; /* colonne 2 e 3 */
    grid-row: 2 / 3;    /* seconda riga */
  }
}