
.single-event-cta-container {
    display: grid;
    background: var(--event-cta-bg);
    color: var(--event-cta-color);
    grid-template-columns: 0.2fr 1fr;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
    margin: 30px 0px 15px 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 16px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 16px, white 0px), radial-gradient(circle at bottom left, transparent 0, transparent 16px, white 0px), radial-gradient(circle at bottom right, transparent 0, transparent 16px, white 0px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 16px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 16px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 16px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent 16px, black 0px);
    mask-position: top left, top right, bottom left, bottom right;


    h3 {
        color: var(--event-cta-color);
        text-transform: initial;
    }

    a {
       color: color-mix(in srgb, var(--event-cta-color) 95%, black 5%);
       font-weight: bold;
    }
}

@media (max-width: 960px)  {
    .single-event-cta-container {
        grid-template-columns: 1fr;
    }
    
}

.single-event-cta-img {
    padding: 1em;
    max-width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {  
        font-size: 40px !important; 
        min-width: 60px;
        min-height: 60px;
    }
}

.single-event-cta-container .single-event-cta-item:nth-child(1) {
    background:  color-mix(in srgb, var(--event-cta-bg) 90%, black 10%);  
    display: flex;
    justify-content: center;
    align-items: center;
}


.single-event-cta-container .single-event-cta-item:nth-child(2) {
    padding: 2em 1em;
}

.single-event-cta-container.green {
    --event-cta-bg: var(--green);
    --event-cta-color: white;
}

.single-event-cta-container.grey {
    --event-cta-bg: var(--grey);
    --event-cta-color: white;
}

.single-event-cta-container.brown {
    --event-cta-bg: var(--brown);
    --event-cta-color: white;
}

.single-event-container.indianred {
    --event-cta-bg: var(--indianred);
    --event-cta-color: white;
}
