/* ==========================================================
   WHY ALA
========================================================== */

.why-ala {
  padding: 120px 0;

  background: #ffffff;
}

.why-grid {
  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 60px;

  align-items: center;
}

.why-image {
  position: relative;

  overflow: hidden;

  border-radius: 28px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.why-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s ease;
}

.why-image:hover img {
  transform: scale(1.05);
}

/* ==========================================================
   WHY CONTENT
========================================================== */

.why-content {
  display: flex;

  flex-direction: column;

  gap: 35px;
}

.why-item {
  padding-bottom: 28px;

  border-bottom: 1px solid rgba(20, 58, 90, 0.12);
}

.why-item:last-child {
  border-bottom: none;

  padding-bottom: 0;
}

.why-number {
  display: block;

  margin-bottom: 10px;

  font-size: 3rem;

  font-weight: 800;

  color: #143a5a;

  letter-spacing: -2px;

  text-shadow: 0 4px 12px rgba(20, 58, 90, 0.1);

  line-height: 1;
}

.why-item h3 {
  margin: 0 0 10px;

  font-size: 1.25rem;

  font-weight: 700;

  color: #143a5a;
}

.why-item p {
  margin: 0;

  color: #666;

  line-height: 1.7;
}

/* ==========================================================
   WHY HEADER
========================================================== */

.why-ala .section-header {
  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;
}

.why-ala .section-header h2 {
  margin: 18px 0 24px;

  font-size: 3rem;

  line-height: 1.15;

  color: #143a5a;
}

.why-ala .section-header p {
  max-width: 650px;

  margin: auto;

  font-size: 1.1rem;

  line-height: 1.8;

  color: #666;
}

<!-- ======================================================
     EVENTI
====================================================== -->

<section class="events-home">

    <div class="container">

        <div class="section-header">

            <span class="section-tag">
                EVENTI
            </span>

            <h2>Prossimi appuntamenti</h2>

            <p>
                Gare, open day, manifestazioni e iniziative per vivere
                l'atletica insieme.
            </p>

        </div>

        <div class="events-grid">

            <!-- Evento 1 -->

            <article class="event-card">

                <div class="event-image">

                    <img src="assets/img/events/evento1.webp" alt="Open Day">

                    <div class="event-date">

                        <span class="day">15</span>

                        <span class="month">SET</span>

                    </div>

                </div>

                <div class="event-content">

                    <h3>Open Day Atletica</h3>

                    <p>
                        Vieni a provare gratuitamente una giornata di allenamento.
                    </p>

                    <a href="#">Scopri di più →</a>

                </div>

            </article>

            <!-- Evento 2 -->

            <article class="event-card">

                <div class="event-image">

                    <img src="assets/img/events/evento2.webp" alt="Gara">

                    <div class="event-date">

                        <span class="day">22</span>

                        <span class="month">SET</span>

                    </div>

                </div>

                <div class="event-content">

                    <h3>Meeting Provinciale</h3>

                    <p>
                        Una giornata dedicata alle gare delle categorie giovanili.
                    </p>

                    <a href="#">Scopri di più →</a>

                </div>

            </article>

            <!-- Evento 3 -->

            <article class="event-card">

                <div class="event-image">

                    <img src="assets/img/events/evento3.webp" alt="Nordic Walking">

                    <div class="event-date">

                        <span class="day">28</span>

                        <span class="month">SET</span>

                    </div>

                </div>

                <div class="event-content">

                    <h3>Nordic Walking Experience</h3>

                    <p>
                        Camminata aperta a tutti nel Parco del Ticino.
                    </p>

                    <a href="#">Scopri di più →</a>

                </div>

            </article>

        </div>

        <div class="events-footer">

            <a class="btn-primary" href="eventi.html">

                Vedi tutti gli eventi

            </a>

        </div>

    </div>

</section>