/* Inizio parte griglia*/

:root {
    --base-2: clamp(0.9rem, 1vw, 1rem);
    --scale-2: 1.25;
}

.dynamic-section {
    padding: 3em 10vw;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* Altezza uguale per righe */
    grid-auto-rows: 1fr;
    gap: 2em;
    background-color: #13172e;
}

.box {
    font-size: var(--base-2);
    background-color: #020304;
    color: white;
    border-radius: 1.5em;
    padding: 2em;
    box-shadow: 0 0 0.8em rgba(0,0,0,0.2);
    height: 100%; /* Riempie la cella */
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9);
    overflow: hidden;
}

    .box a {
        color: inherit;
        text-decoration: none;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .box h3 {
        font-size: calc(var(--base-2) * var(--scale-2) * var(--scale-2)*1.2);
        font-weight: 700;
        margin-bottom: 2.5em;
        text-shadow: 0 0 0.3em rgba(0,0,0,1);
    }

.subtitle {
    font-size: calc(var(--base-2) * var(--scale-2)*0.9);
    text-shadow: 0 0 0.3em rgba(0,0,0,1);
}

.text_2 {
    font-size: var(--base-2);
    /* margin-top: auto; Spinge in basso */
    text-shadow: 0 0 0.3em rgba(0,0,0,1);
}

.gradient {
    background: linear-gradient( 194deg, rgba(62,158,216,1) 0%, rgba(23,57,95,1) 42%, rgba(23,57,95,1) 79%, rgba(40,90,139,1) 100% );
}

.box.visible {
    animation: zoomInBounce 0.6s ease-out forwards;
}
  

@keyframes zoomInBounce {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Grid column spans */
.col-4 {
    grid-column: span 4;
}

.col-8 {
    grid-column: span 8;
}

.col-12 {
    grid-column: span 12;
}
/* FINE Inizio parte Blog*/


@media (min-width: 701px) and (max-width: 868px) {

    .dynamic-section {
        padding: 2em 5em;
    }

    .col-4,
    .col-8 {
        grid-column: span 6;
    }    
}

@media (max-width: 700px) {

    .dynamic-section {
        padding: 2em 1.2em;
    }

    .col-4,
    .col-8 {
        grid-column: span 12;
    }
}