.grid-wrapper {

}


.grid {
    display: grid;
    grid-template-columns: 1fr;        /* mobile default */
    gap: 3rem;                         /* spazio tra le colonne */
    row-gap: 4rem;                     /* spazio tra le right */
}

.grid .grid-item {
}


.grid .grid-item.hide {
    display: none;
}


.grid .grid-bottom-wrapper {
    margin-top: 1.5rem;
}

.grid .text-date {
    font-size: var(--fsize-normal);
    font-weight: 500;
}

.grid .text-caption {
    margin-top: 14px;
    font-size: var(--fsize-7);
    font-weight: 700;
}

.grid .external-link-wrapper {
    margin-top: 2rem;
}

@media screen and (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);  /* tablet: 2 colonne */
    }
}

@media screen and (min-width: 1200px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);  /* desktop: 3 colonne */
    }
}


.load-more-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    margin-top: 5rem;
}

.load-more-wrapper .load-more {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    appearance: none;
    font-family: inherit;
    line-height: 1;
    font-size: var(--fsize-normal);
    padding: 1rem 2rem;
    border-radius: 32px;
    transition: all 0.3s linear;
    border: 1px solid var(--color-black);
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}

.load-more-wrapper .load-more.hide {
    display: none;
}

.load-more-wrapper .loader {
    width: 64px;
    height: 64px;
    border: 5px solid #ccc;
    border-top-color: #000; /* colore della parte animata */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

.load-more-wrapper .loader.hide {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}