.elementor-1313 .elementor-element.elementor-element-efa82cf{margin-top:3%;margin-bottom:3%;}.elementor-1313 .elementor-element.elementor-element-7c6cc25{text-align:center;}.elementor-1313 .elementor-element.elementor-element-7c6cc25 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:35px;font-weight:600;color:var( --e-global-color-astglobalcolor3 );}.elementor-1313 .elementor-element.elementor-element-5a4aaaf{text-align:center;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;}.elementor-1313 .elementor-element.elementor-element-586d63310{margin-top:0%;margin-bottom:5%;}.elementor-1313 .elementor-element.elementor-element-7ae950e1 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}@media(max-width:767px){.elementor-1313 .elementor-element.elementor-element-7c6cc25 .elementor-heading-title{font-size:23px;}.elementor-1313 .elementor-element.elementor-element-5a4aaaf{font-size:14px;}}/* Start custom CSS for html, class: .elementor-element-77ccbe6 *//* Griglia con layout Masonry */
.custom-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Crea una griglia responsiva */
    gap: 20px; /* Distanza tra gli articoli */
}

/* Impostazioni specifiche per dispositivi mobili */
@media (max-width: 768px) {
    .custom-post-grid {
        grid-template-columns: 1fr; /* Una sola colonna sui dispositivi mobili */
    }
}

/* Stili per l'immagine */
.post-image {
    position: relative;
    overflow: hidden;
}

.post-image a {
    display: block;
}

.post-image img {
    width: 100%;
    height: 350px;
    transition: all 0.3s ease; /* Rende fluido il passaggio dell'hover */
}

/* Effetto hover sull'immagine */
.post-image:hover img {
    opacity: 0.7; /* Aggiungi un effetto di trasparenza sull'immagine */
}

.post-image:hover:before {
    content: 'Click to read more'; /* Testo che appare al passaggio del mouse */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    opacity: 1;
}

.post-title a {
    font-size: 1.5rem;
    margin-top: 10px;
    color: #333;
    text-decoration: none;
}

.post-title a:hover {
    color: #0073e6;
}

.post-date {
    color: #888;
    font-size: 0.9rem;
}

.post-sottotitolo {
    font-size: 1rem;
    font-style: italic;
    margin: 10px 0;
}

.post-excerpt {
    color: #444;
}

.post-item {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9; /* Colore di sfondo */
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Aggiungi un'ombra sottile per dare profondità */
    transition: all 0.3s ease;
}/* End custom CSS */