.OnGroundEventCard{
    box-shadow: 0px 1px 2px 0px #00000029;
    @apply bg-white mx-sm mb-md p-md cursor-pointer;

    .EventCalendarView{
        width: 100px;
        @apply inline-block mr-md;
    }

    .EventDetails{
        width: calc( 100% - 116px );
        @apply inline-block align-top;

        h2{
            @apply text-caption-m font-bold mb-md text-text-primary;
        }

        .EventLocation{
            @apply flex mb-md;
            svg{
                @apply h-4 w-4;
            }
            p{
                @apply text-body-s text-text-primary ml-sm;
            }
        }
    
        .EventTime{
            @apply flex ;
            svg{
                @apply h-4 w-4;
            }
            p{
                @apply text-body-s text-text-primary ml-sm;
            }
        }

        .EventCategory{
            p{
                @apply text-body-s text-text-primary ;
            }
        }

    }


}

@screen dt{
    .OnGroundEventCard{
        .EventDetails{
            .EventLocation{
                p{
                    @apply text-body-s-dt;
                }
            }
        
            .EventTime{
                p{
                    @apply text-body-s-dt;
                }
            }
    
            .EventCategory{
                p{
                    @apply text-body-s-dt;
                }
            }
    
        }
    }
}