@charset "utf-8";
/* CSS Document */

:root{
  --az-bg: #f5f7f6;
  --az-card: #ffffff;
  --az-ink: #2b3a3a;
  --az-muted: #6f7d7d;
  --az-accent: #7aa5a8;
  --az-soft: #eef5f4;
  --az-radius: 1.2em;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--az-bg);
  font-size:16px;
}

/* BLOCK */
.az-video-testo{
  max-width: 65em;
  margin: 3em auto;
  padding: 0 1em;
}

/* grid */
.az-video-testo__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}

/* BOX */
.az-video-testo__box{
  background: var(--az-card);
  border-radius: var(--az-radius);
  padding: 1.2em;
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.08);
}

/* titolo */
.az-video-testo__title{
  font-size: 24px;
  margin: 0 0 0.6em;
  color: var(--az-ink);
}

/* iframe container */
.az-video-testo__frame{
  border-radius: 0.9em;
  overflow: hidden;
  margin-bottom: 0.8em;
}

.az-video-testo__iframe{
  width: 100%;
  height: 18em;
  border: none;
}

/* testo */
.az-video-testo__text{
  font-size: 1em;
  line-height: 1.6;
  color: var(--az-muted);
  margin: 0;
}

/* responsive */
@media (max-width: 52em){
  .az-video-testo__grid{
    grid-template-columns: 1fr;
  }
}

/* testo 
	<section class="az-video-testo">
  <div class="az-video-testo__grid">

    <!-- BOX 1 -->
    <div class="az-video-testo__box">
      <h2 class="az-video-testo__title">Piazza Risorgimento</h2>

      <div class="az-video-testo__frame">
       <iframe width="100%" height="300" src="https://www.youtube.com/embed/aFlBtJTcj2E?si=otCYAB3yRciVr7kz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>

      <p class="az-video-testo__text">
   <h2>L'orazione ufficiale </h2><p>della dirigente scolastica prof. ssa Eliana Frigerio in occasione della celebrazione in ricordo dei Martiri della Gera</p>
      </p>
    </div>