
/* ========= Upcoming Event ========= */
.event-wrap {
    padding: 1em;    
    
    border-radius: var(--border-radius-lg);
    background:    
        radial-gradient(900px 500px at 20% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
        radial-gradient(700px 420px at 90% 70%, rgba(0, 212, 255, 0.22), transparent 58%),
        linear-gradient(135deg, #F7EBFDFF, #FFF4E6 55%, #F0FCEDFF);
        /*linear-gradient(135deg, var(--brand-orange), var(--brand-color) 55%, var(--brand-blue))*/
        
}

.white-background {
    background-color: white;
    padding: 1em;
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column-reverse;

}
/*
background-color: #E7F3FF; }
   {background-color: #FFF4E6; }
   {background-color: #F7EBFDFF; }
   {background-color: #F0FCEDFF
*/

.event-content{
    color: var(--text-color);
    margin-top: .5em;
    border-radius: var(--border-radius-lg);
    background: white;
    border: 1px solid rgba(255,255,255,0.14);
  
}

.event-desc{
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}


.event-metaLabel{
  display: block;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);;
}

.event-ctaRow{
    margin: 0.5em;
    display: grid;
    text-align: center;
}


.event-note{
  margin-top: .5em;
  font-size: 0.6rem;
  text-align: center;
  color: var(--muted);;
}



.event-media img{
    width: 100%;    
    border-radius: var(--border-radius-lg);
    object-fit: cover;
    display: block;

}

@media (min-width: 990px) {
    .event-wrap {
      padding: 2em;  
    }
 
    .white-background {
      padding: 2em;  
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .event-content{
        flex: 1;
        max-width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2em;
        
    }
    .event-media {
        flex: 1;
        max-width: 450px;
    }
}


@media (min-width: 1280px) {
  .event-wrap {
      padding: 5em;  
    }

}