.event {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    position: relative;
}

.event-container {
    padding: 3vw 5vw 0 5vw;
    width: 80%;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;

    object-fit: 16/9;
    


}


.event-container div > img {
    width: 100%;
    object-fit: fill;
    border-radius: 20px;
    z-index: -1;

}

.event-title {
    font-size: clamp(2rem, 4vw, 5rem);
}

.img-principal {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: relative;

    object-fit: fill;
    max-height: 80vh;
    overflow: hidden;
    border-radius: 20px;

    margin-bottom: 4vw;

}



.event-text {
    width: 100%;
    margin: 30px;
    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;

    color: var(--color-white);
    font-size: clamp(2rem, 3vw, 5rem);



}

.event-text i:hover {
    transform: scale(1.3);
    cursor: pointer;
    text-shadow: 5px 2px 10px var(--color-black);

}

#fa-arrow-left:hover {
    text-shadow: -5px 2px 10px var(--color-black);
}

.event-slide-ball {
    position: absolute;
    bottom: 100px;
    z-index: -1;
    display: flex;
    gap: 10px;
}

.event-slide-ball i {
    text-shadow: 3px 1px black;
}