.event {
    display: flex;
    width: 100%;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    background-color: var(--event-bg-color);
    transition: transform .3s ease;
    box-shadow: 2px 2px 5px var(--event-shadow);

    &:hover {
        transform: scale(1.02);
    }

    .event-poster {
        width: 25%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .event-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .event-body {
            display: flex;
            height: 100%;

            .event-description {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;

                h2 {
                    margin: 0;
                    padding: 10px;

                    a {
                        text-decoration: none;
                        font-weight: bold;
                        color: var(--events-a-color);

                        &:hover {
                            text-decoration: underline;
                            color: var(--events-a-color-hover);
                        }
                    }
                }

                div {
                    margin: 0;
                    padding: 0 20px;

                    svg {
                        width: 1em;
                    }
                }
            }

            .participants {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                flex-wrap: nowrap;
                width: 7em;

                .event-organizer {
                    width: 60%;
                    aspect-ratio: 1 / 1;
                    margin: 0 auto;
                    border: 1px solid grey;
                    border-radius: 50%;
                }

                div {
                    margin: 0;

                    svg {
                        width: 1em;
                    }
                }
            }
        }

        .event-state {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 1em;
            font-weight: bold;
            padding: 5px 20px;
            border-top: 1px solid var(--events-dates-container-bg-color);
        }

        .event-green, .event-red {
            width: 1em;
            height: 1em;
            border-radius: 100%;
        }

        .event-green {
            background-color: var(--green);
        }

        .event-red {
            background-color: var(--red);
        }
    }
}
@media screen and (max-width: 430px) {
    .event {
        .event-poster {
            display: none;
        }
    }

}