.eventi_container {
    width: 960px;
    margin: 0 auto 70px;
}

.eventi_container .evento {
    display: block;
    width: 230px;
    height: auto;
    box-sizing: border-box;
    float: left;
    transition: all 0.3s ease;
    margin: 10px 13px 20px 0;
    padding: 10px 10px 65px;
    background: #FFF;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.eventi_container .evento:nth-child(4n + 0) {
    margin: 10px 0 20px;
}

.eventi_container .evento:hover {
    margin: 0 13px 30px 0;
}

.eventi_container .evento:nth-child(4n + 0):hover {
    margin: 0 0 30px;
}

.eventi_container .evento .immagine {
    width: 100%;
    height: 128px;
    margin: 0 0 10px;
    position: relative;
    border-radius: 10px;
}

.eventi_container .evento .immagine > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.eventi_container .evento .hover {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: linear-gradient(222.66deg, #00B3CC 15.05%, #007398 83.22%);
}

.eventi_container .evento .mese {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px 10px;
}

.eventi_container .evento:hover .hover {
    opacity: 0.7;
}

.eventi_container .evento .nome_evento {
    display: block;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #303030;
    margin: 0 0 10px;
    text-decoration: none;
}

.eventi_container .evento .nome_evento:hover,
.eventi_container .evento .nome_evento:active,
.eventi_container .evento .nome_evento:focus {
    text-decoration: none;
}

.eventi_container .evento .date_evento,
.eventi_container .evento .luogo_evento {
    display: block;
    font-size: 12px;
    line-height: 17px;
    color: #303030;
    margin: 0 0 6px;
    padding: 0;
}

.eventi_container .evento .date_evento {
    font-weight: 700;
}

.eventi_container .evento .date_evento svg {
    margin: 0 4px -2px 0;
}

.eventi_container .evento .luogo_evento svg {
    margin: 0 5px -3px 1px;
}

.eventi_container .evento .categorie_evento {
    margin: 20px 0 0;
}

.eventi_container .evento .categorie_evento span {
    display: block;
    float: left;
    background: #EDEDED;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    color: #303030;
    padding: 4px 7px;
    margin: 0 12px 12px 0;
}

.eventi_container .evento .categorie_evento span svg {
    margin: 0 5px 0 0;
}

.eventi_container .evento .pulsante {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 20px;
    z-index: 1;
    padding: 10px 20px 11px;
    text-align: center;
    background: linear-gradient(222.66deg, #00B3CC 15.05%, #007398 83.22%);
    border-radius: 20px;
    font-size: 14px;
    line-height: 19px;
    color: #FFF;
    font-weight: 700;
    text-transform: uppercase;
}

.eventi_container .evento .pulsante svg {
    display: none;
}

@media screen and (max-width: 1000px) {
    .eventi_container {
        width: 716px;
    }

    .eventi_container .evento:nth-child(4n + 0) {
        margin: 10px 13px 20px 0;
    }

    .eventi_container .evento:nth-child(4n + 0):hover {
        margin: 0 13px 30px 0;
    }

    .eventi_container .evento:nth-child(3n + 0) {
        margin: 10px 0 20px;
    }

    .eventi_container .evento:nth-child(3n + 0):hover {
        margin: 0 0 30px;
    }
}

@media screen and (max-width: 960px) {
    .eventi_container {
        margin: 0 auto 50px;
    }
}

@media screen and (max-width: 760px) {
    .eventi_container {
        width: 473px;
    }

    .eventi_container .evento:nth-child(3n + 0) {
        margin: 10px 13px 20px 0;
    }

    .eventi_container .evento:nth-child(3n + 0):hover {
        margin: 0 13px 30px 0;
    }

    .eventi_container .evento:nth-child(2n + 0) {
        margin: 10px 0 20px;
    }

    .eventi_container .evento:nth-child(2n + 0):hover {
        margin: 0 0 30px;
    }
}

@media screen and (max-width: 650px) {
    .eventi_container {
        width: auto;
        margin: 0 10px 50px;
    }

    .eventi_container .evento {
        width: auto;
        min-height: 118px;
        float: none;
        margin: 0 0 10px;
        padding: 8px 0 0 110px;
        border-radius: 5px;
    }

    .eventi_container .evento:hover,
    .eventi_container .evento:nth-child(4n + 0), .eventi_container .evento:nth-child(4n + 0):hover,
    .eventi_container .evento:nth-child(3n + 0), .eventi_container .evento:nth-child(3n + 0):hover,
    .eventi_container .evento:nth-child(2n + 0), .eventi_container .evento:nth-child(2n + 0):hover {
        margin: 0 0 10px;
    }

    .eventi_container .evento .immagine {
        width: 90px;
        height: auto;
        border-radius: 5px;
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 1;
        margin: 0;
    }

    .eventi_container .evento .hover {
        border-radius: 5px;
    }

    .eventi_container .evento .mese {
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        background: linear-gradient(222.66deg, #00B3CC 15.05%, #007398 83.22%);
        opacity: 0.9;
        border-radius: 5px 5px 0 0;
        font-size: 10px;
        line-height: 14px;
        padding: 4px 0 5px;
    }

    .eventi_container .evento .nome_evento {
        font-size: 16px;
        line-height: 22px;
    }

    .eventi_container .evento .date_evento,
    .eventi_container .evento .luogo_evento {
        font-size: 10px;
        line-height: 14px;
        margin: 0 0 5px;
    }

    .eventi_container .evento .categorie_evento {
        margin: 10px 0 0;
    }

    .eventi_container .evento .categorie_evento span {
        font-size: 11px;
        line-height: 13px;
    }

    .eventi_container .evento .pulsante {
        width: 30px;
        height: 30px;
        font-size: 0;
        line-height: 0;
        border-radius: 15px;
        padding: 6.5px 0 0;
        position: absolute;
        top: 50%;
        bottom: auto;
        right: 10px;
        left: auto;
        margin-top: -15px;
    }

    .eventi_container .evento .pulsante svg {
        display: inline;
    }
}