@import '../../../../style/variables.scss';

.event-booking-information{
    .event-information-detail{
        padding: 20px;
        .image-wrapper{
            width: 100%;
            position: relative;
            margin-bottom: 16px;
            @media only screen and (min-width: 640px) {
                width: 222px;
                height: 150px;
                margin-right: 20px;
                margin-bottom: 0;
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .badge{
                position: absolute;
                top: 16px;
                right: 0;
                font-size: 16px;
                line-height: 1;
                letter-spacing: 0.2px;
                color: $tertiary;
                background: $white;
                padding: 4px 10px;
            }
        }
        .content-wrapper{
            .date{
                font-size: 18px;
                line-height: 24px;
                color: $primary;
                margin-bottom: 8px;
                @media only screen and (min-width: 640px) {
                    font-size: 20px;
                    line-height: 26px;
                    margin-bottom: 12px;
                }
                @media only screen and (min-width: 768px) {
                    font-size: 24px;
                    line-height: 28px;
                }
            }
            .title{
                font-size: 18px;
                line-height: 24px; 
                font-weight: 400;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                margin: 0;
                @media only screen and (min-width: 768px) {
                    font-size: 20px;
                  
                }
            }
            .time{
                font-size: 14px;
                line-height: 16px;
                margin-bottom: 8px;
                @media only screen and (min-width: 640px){
                    margin-bottom: 12px;
                }
                @media only screen and (min-width: 1024px){
                    margin-bottom: 20px;
                }
            }
        }
    }
}