<section class="rtds-section rtds-section--meteo rtds-py-8 md:rtds-py-12 rtds-background-02">
<div class="rtds-container-sm rtds-space-y-4">
<div class="rtds-section-header rtds-section-header--meteo">
<div class="rtds-grid md:rtds-flex rtds-items-center rtds-gap-4 md:rtds-gap-6 rtds-content-01">
<div class="rtds-flex rtds-flex-wrap rtds-flex-wrap rtds-items-center rtds-gap-2 md:rtds-gap-4">
<h2 class="rtds-heading-3 md:rtds-heading-2">Meteo Toscana</h2>
<div class="rtds-vertical-divider rtds-w-4 md:rtds-w-6 lg:rtds-w-8">
<img class="rtds-w-full rtds-h-auto" src="/images/vertical-divider.svg" alt="">
</div>
<div class="rtds-w-full md:rtds-w-auto">
<h3 class="rtds-heading-5 rtds-content-secondary-dark">Emissione</h3>
<div class="rtds-flex rtds-items-center rtds-gap-4 rtds-content-02">
<small class="rtds-text-sm rtds-leading-none">
<span class="rtds-sr-only">Giorno: </span>
<date class="rtds-flex rtds-items-center rtds-gap-1.5" datetime="2024-12-11"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="/icons.svg#outline--calendar"></use>
</svg>
10.11.24</date>
</small>
<small class="rtds-text-sm rtds-leading-none">
<span class="rtds-sr-only">Ora: </span>
<time class="rtds-flex rtds-items-center rtds-gap-1.5" datetime="10:11"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
<use href="/icons.svg#outline--clock"></use>
</svg>
10:11</time>
</small>
</div>
</div>
</div>
<span class="rtds-section-header__right-content md:rtds-ml-auto">
<button type="button" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s rtds-hidden lg:rtds-inline-flex">
<span class="rtds-sr-only">Meteo Toscana: </span>vedi dettaglio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</button>
</span>
</div>
</div>
<div class="rtds-grid rtds-gap-6 lg:rtds-grid-cols-12 lg:rtds-gap-12">
<div class="rtds-meteo-allerte rtds-grid rtds-gap-4 lg:rtds-col-span-5">
<h3 class="rtds-sr-only">Allerta meteo</h3>
<div class="rtds-grid md:rtds-flex rtds-gap-4 rtds-bg-white rtds-py-8 rtds-px-4 md:rtds-p-6 md:rtds-gap-6">
<div class="rtds-meteo-allerte__day md:rtds-flex-1 rtds-grid rtds-content-around rtds-gap-1.5">
<h4 class="rtds-heading-6 rtds-leading-none rtds-content-secondary-dark">Mercoledì, 11 dicembre 2024</h4>
<ul class="rtds-meteo-allerte__day-list rtds-flex rtds-items-center rtds-gap-1 rtds-flex-wrap lg:rtds-grid lg:rtds-grid-cols-4 lg:rtds-gap-2">
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
</ul>
</div>
<div class="rtds-meteo-allerte__day md:rtds-flex-1 rtds-grid rtds-content-around rtds-gap-1.5">
<h4 class="rtds-heading-6 rtds-leading-none rtds-content-secondary-dark">Mercoledì, 11 dicembre 2024</h4>
<ul class="rtds-meteo-allerte__day-list rtds-flex rtds-items-center rtds-gap-1 rtds-flex-wrap lg:rtds-grid lg:rtds-grid-cols-4 lg:rtds-gap-2">
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
</ul>
</div>
</div>
<div class="rtds-meteo-allerte__levels rtds-grid rtds-gap-2 md:rtds-flex md:rtds-gap-4 rtds-items-baseline">
<h4 class="rtds-text-xs">Livelli di allerta</h4>
<ul class="rtds-meteo-allerte__levels-list rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap">
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-verde"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">nessuna</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-giallo"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">gialla</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-arancione"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">arancione</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-rosso"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">rossa</span>
</span>
</li>
</ul>
</div>
</div>
<div class="rtds-meteo-previsioni lg:rtds-col-span-7">
<h3 class="rtds-sr-only">Previsioni meteo</h3>
<ul class="rtds-meteo-previsioni__list rtds-grid rtds-grid-cols-3 rtds-gap-4">
<li class="">
<a href="#" class="rtds-grid rtds-gap-1 rtds-content-02 hover:rtds-underline hover:rtds-text-secondary-dark rtds-text-sm rtds-group/meteo">
<img width="163" height="168" alt="" src="/images/meteo.jpg" class="rtds-rounded-lg rtds-w-full rtds-min-w-0 rtds-h-auto rtds-transition-all group-hover/meteo:rtds-shadow-md">
<span class="rtds-meteo-previsioni__item-time">
<svg class="rtds-icon rtds-stroke-current rtds-w-3 rtds-h-3" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--clock" />
</svg>
mattina
</span>
<span class="rtds-sr-only"> - dettaglio previsione meteo sul sito LAMMA</span>
</a>
</li>
<li class="">
<a href="#" class="rtds-grid rtds-gap-1 rtds-content-02 hover:rtds-underline hover:rtds-text-secondary-dark rtds-text-sm rtds-group/meteo">
<img width="163" height="168" alt="" src="/images/meteo.jpg" class="rtds-rounded-lg rtds-w-full rtds-min-w-0 rtds-h-auto rtds-transition-all group-hover/meteo:rtds-shadow-md">
<span class="rtds-meteo-previsioni__item-time">
<svg class="rtds-icon rtds-stroke-current rtds-w-3 rtds-h-3" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--clock" />
</svg>
mattina
</span>
<span class="rtds-sr-only"> - dettaglio previsione meteo sul sito LAMMA</span>
</a>
</li>
<li class="">
<a href="#" class="rtds-grid rtds-gap-1 rtds-content-02 hover:rtds-underline hover:rtds-text-secondary-dark rtds-text-sm rtds-group/meteo">
<img width="163" height="168" alt="" src="/images/meteo.jpg" class="rtds-rounded-lg rtds-w-full rtds-min-w-0 rtds-h-auto rtds-transition-all group-hover/meteo:rtds-shadow-md">
<span class="rtds-meteo-previsioni__item-time">
<svg class="rtds-icon rtds-stroke-current rtds-w-3 rtds-h-3" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--clock" />
</svg>
mattina
</span>
<span class="rtds-sr-only"> - dettaglio previsione meteo sul sito LAMMA</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Cta meteo mobile -->
<div class="rtds-flex rtds-justify-center rtds-py-8 lg:rtds-hidden">
<a href="#" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary rtds-btn--s">
vedi dettaglio<span class="rtds-sr-only">previsioni meteo</span>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</div>
</div>
</section>
<section
class="rtds-section rtds-section--meteo rtds-py-8 md:rtds-py-12 rtds-background-02"
>
<div class="rtds-container-sm rtds-space-y-4">
{% render '@section-header', {
classes: 'rtds-section-header--meteo',
contentWrapperDisplay: 'rtds-grid md:rtds-flex',
contentLeftDisplay: 'rtds-flex rtds-flex-wrap',
verticalDividerRight: 'true',
heading: 'Meteo Toscana',
sectionHeaderSecondaryContent: '
<div class="rtds-w-full md:rtds-w-auto">
<h3 class="rtds-heading-5 rtds-content-secondary-dark">Emissione</h3>
<div class="rtds-flex rtds-items-center rtds-gap-4 rtds-content-02">
<small class="rtds-text-sm rtds-leading-none">
<span class="rtds-sr-only">Giorno: </span>
<date class="rtds-flex rtds-items-center rtds-gap-1.5" datetime="2024-12-11"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="/icons.svg#outline--calendar"></use>
</svg>
10.11.24</date
>
</small>
<small class="rtds-text-sm rtds-leading-none">
<span class="rtds-sr-only">Ora: </span>
<time class="rtds-flex rtds-items-center rtds-gap-1.5" datetime="10:11"
><svg
class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="/icons.svg#outline--clock"></use>
</svg>
10:11</time>
</small>
</div>
</div>
',
sectionHeaderRightCta: [ {
href: '',
variant: '--icon-right',
label: '<span class="rtds-sr-only">Meteo Toscana: </span>vedi dettaglio',
classes: 'rtds-btn--secondary rtds-btn--s rtds-hidden lg:rtds-inline-flex' } ] }, true %}
<div class="rtds-grid rtds-gap-6 lg:rtds-grid-cols-12 lg:rtds-gap-12">
<div class="rtds-meteo-allerte rtds-grid rtds-gap-4 lg:rtds-col-span-5">
<h3 class="rtds-sr-only">Allerta meteo</h3>
<div class="rtds-grid md:rtds-flex rtds-gap-4 rtds-bg-white rtds-py-8 rtds-px-4 md:rtds-p-6 md:rtds-gap-6">
{% for i in range(0, 2) %}
<div class="rtds-meteo-allerte__day md:rtds-flex-1 rtds-grid rtds-content-around rtds-gap-1.5">
<h4 class="rtds-heading-6 rtds-leading-none rtds-content-secondary-dark">Mercoledì, 11 dicembre 2024</h4>
<ul class="rtds-meteo-allerte__day-list rtds-flex rtds-items-center rtds-gap-1 rtds-flex-wrap lg:rtds-grid lg:rtds-grid-cols-4 lg:rtds-gap-2">
{% for i in range(0, 8) %}
<!--
Riportare testo per ogni tipo di rischio con relativo livello di allerta
nell'alt dell'icona e nel tooltip
-->
<li class="rtds-flex-shrink-0 md:rtds-max-w-[32px] xl:rtds-max-w-[64px] has-tooltip has-tooltip-button has-tooltip-bottom">
<a href="#" class="rtds-tooltip-button">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
<span class="rtds-sr-only"> - vedi dettaglio</span>
</a>
<span class="rtds-tooltip rtds-tooltip--sm">
Rischio idraulico: nessuno - vedi dettaglio
</span>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{#<div class="rtds-meteo-allerte__day rtds-space-y-1.5 md:rtds-flex-1">
<h4 class="rtds-heading-6 rtds-leading-none rtds-content-secondary-dark">Giovedì, 12 dicembre 2024</h4>
<ul class="rtds-meteo-allerte__day-list rtds-flex rtds-items-center rtds-gap-1 rtds-flex-wrap lg:rtds-grid lg:rtds-grid-cols-4">
{% for i in range(0, 8) %}
<li class="rtds-flex-shrink-0 rtds-max-w-[48px]">
<a href="#">
<img width="48" height="48" alt="Rischio idraulico: nessuno" src="/images/idraulico_nessuno.png" srcset="/images/idraulico_nessuno.png 1x, /images/idraulico_nessuno@2x.png 2x" class="rtds-w-full rtds-h-auto">
</a>
</li>
{% endfor %}
</ul>
</div>#}
</div>
<div class="rtds-meteo-allerte__levels rtds-grid rtds-gap-2 md:rtds-flex md:rtds-gap-4 rtds-items-baseline">
<h4 class="rtds-text-xs">Livelli di allerta</h4>
<ul class="rtds-meteo-allerte__levels-list rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap">
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-verde"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">nessuna</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-giallo"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">gialla</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-arancione"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">arancione</span>
</span>
</li>
<li class="rtds-flex-shrink-0">
<span class="rtds-chip rtds-chip--sm rtds-border-gray-02 rtds-bg-white rtds-gap-1">
<span class="rtds-block rtds-rounded-full rtds-w-2 rtds-h-2 rtds-flex-shrink-0 rtds-bg-allerta-rosso"></span>
<span class="rtds-chip-label rtds-content-03 rtds-font-normal">rossa</span>
</span>
</li>
</ul>
</div>
</div>
<div class="rtds-meteo-previsioni lg:rtds-col-span-7">
<h3 class="rtds-sr-only">Previsioni meteo</h3>
<ul class="rtds-meteo-previsioni__list rtds-grid rtds-grid-cols-3 rtds-gap-4">
{% for i in range(0, 3) %}
<li class="">
<a href="#" class="rtds-grid rtds-gap-1 rtds-content-02 hover:rtds-underline hover:rtds-text-secondary-dark rtds-text-sm rtds-group/meteo">
<img width="163" height="168" alt="" src="/images/meteo.jpg" class="rtds-rounded-lg rtds-w-full rtds-min-w-0 rtds-h-auto rtds-transition-all group-hover/meteo:rtds-shadow-md">
<span class="rtds-meteo-previsioni__item-time">
{% render '@icon', { id: 'outline--clock',size: 'rtds-w-3 rtds-h-3' } %}
mattina
</span>
<span class="rtds-sr-only"> - dettaglio previsione meteo sul sito LAMMA</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<!-- Cta meteo mobile -->
<div class="rtds-flex rtds-justify-center rtds-py-8 lg:rtds-hidden">
{% render '@button--icon-right-s',{ href: '#', classes: 'rtds-btn--secondary', label: 'vedi dettaglio<span class="rtds-sr-only">previsioni meteo</span>', hasIcon: 'true' }, true %}
</div>
</div>
</section>
/* No context defined. */
No notes defined.