.card-event {
    background:#CB0084;
    border-radius:25px;
    margin-bottom:1rem;
    color:#ffffff;
    padding:1.5rem;
}

input.card-event-toggle[type=checkbox] {
    display:none;
}

.card-event .upper {
    display:flex;
    gap:2rem;    
    flex-direction:column;
    align-items: center;
}

.card-event .lower {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-event .lower .lower-inner {
    overflow: hidden;
    padding-top:10px;
    display:flex;
    flex-direction:column;
    gap: 1rem;
}


    input.card-event-toggle[type=checkbox]:checked + .card-event .lower, .lower:has(*:focus-visible) {
        grid-template-rows: 1fr;
    }

    .card-event.is-break {
        color:#4F0077;
        background:#ffffff;
        font-size: 1.25rem;
        font-weight: bold;
    }

    .card-event.card-event-alternate {        
    }

.card-event .time {
    white-space:nowrap;
}

.card-event .speaker {
    display:flex;
    flex-direction:column;
    align-items: center;
    gap:1rem;
    flex-shrink:0;
}

.card-event .speaker-image {
    background-image:var(--image);
    width:125px;
    height:125px;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:100%;
    border:3px solid #ffffff;
    flex-shrink:0;
}

.card-event .speaker-name {
    font-weight:bold;
    font-size:1.25rem;
}

.card-event .language-location {
    display:flex;
    flex-direction:column;    
    font-size:1rem;
    flex-shrink:0;    
}

.card-event .speaker-info, .card-event .language-location {
    text-align:center;
}

.card-event .location {
    font-weight:bold;
    flex-shrink:0;
}

.card-event .title {
    font-weight:bold;
    font-size:1rem;
    flex: 1;
}

    .card-event label {
        width:23px;
        height:23px;
        display:inline-block;
        mask-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="690.58 1739.48 18.63 18.63" fill="none"><g><line x1="690.58" y1="1748.79" x2="709.21" y2="1748.79" stroke="currentColor" stroke-width="1"/><line x1="699.90" y1="1739.48" x2="699.90" y2="1758.11" stroke="currentColor" stroke-width="1"/></g></svg>');
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: 100% 100%;  
        background:white;
    }

    input.card-event-toggle[type=checkbox]:checked + .card-event label {
        mask-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="690.58 1739.48 18.63 18.63" fill="none"><g><line x1="690.58" y1="1748.79" x2="709.21" y2="1748.79" stroke="currentColor" stroke-width="1"/></g></svg>');
    }

.card-event .speaker-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: .5rem;
}

@media (min-width: 1000px) {
    .card-event {
        padding:2rem;
    }

    .card-event .upper {        
        flex-direction: row;        
    }

    .card-event.is-break .time {
        margin-right:63px;
    }

    .card-event .speaker {
        flex-direction:row;
        width:320px;
    }

    .card-event .speaker-image {
        width:75px;
        height:75px;
    }

        .card-event .language-location, .card-event .title {
            align-self:flex-start;
        }

    .card-event .speaker-info, .card-event .language-location {
        text-align:left;
    }

    .card-event .lower .lower-inner {
        flex-direction:row;
        margin-left: 132px;        
        gap: 8.5rem;
    }
}