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

.event-attende-card {
    @media only screen and (min-width: 640px) {
        height: 366px;
    }
    .image-wrapper {
        flex-shrink: 0;
        @media only screen and (max-width: 639px) {
            img{
                max-height: 350px;
            }
        }
        @media only screen and (max-width: 480px) {
            img{
                max-height: 300px;
            }
        }
        @media only screen and (min-width: 640px) {
            width: 300px;
        }
        @media only screen and (min-width: 768px) {
            width: 350px;
        }
        @media only screen and (min-width: 1200px) {
            width: 410px;
        }
        @media only screen and (min-width: 1600px) {
            width: 510px;
        }
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        .badge {
            position: absolute;
            top: 20px;
            right: 0;
            font-size: 14px;
            line-height: 16px;
            padding: 2px 10px;
            color: $tertiary;
            background: $white;
            padding: 5px 10px;
            @media only screen and (min-width: 768px) {
                font-size: 16px;
                line-height: 20px;
                padding: 8px 10px;
            }
            @media only screen and (min-width: 1200px) {
                font-size: 18px;
                line-height: 22px;
                padding: 10px 10px;
            }
        }
    }
    .content-wrapper {
        padding: 20px 15px;
        border: 1px solid $mainBorder;
        border-top: none;
        @media only screen and (min-width: 640px) {
            border-left: none;
            border-top: 1px solid $mainBorder;
            padding: 20px;
        }
        @media only screen and (min-width: 1200px) {
            padding: 32px;
        }
        .title{
            color: $tertiary;
        }

        h2 {
            font-size: 22px;
            line-height: 26px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 20px;
            @media only screen and (min-width: 640px) {
                font-size: 24px;
                line-height: 28px;
            }
            @media only screen and (min-width: 768px) {
                font-size: 26px;
                line-height: 30px;
            }
            @media only screen and (min-width: 1024px) {
                font-size: 28px;
                line-height: 32px;
            }
            @media only screen and (min-width: 1600px) {
                font-size: 44px;
                line-height: 48px;
                margin-bottom: 32px;
            }
        }
        .event-list-wrapper {
            li {
                font-size: 14px;
                line-height: 16px;
                @media only screen and (min-width: 640px) {
                    font-size: 16px;
                    line-height: 18px;
                }
                @media only screen and (min-width: 1441px) {
                    font-size: 18px;
                    line-height: 20px;
                }
                div{
                    color: $primary;
                }
                span{
                    &.head{
                        font-size: 16px;
                        line-height: 1;
                        color: $btnText;
                        margin-bottom: 8px;
                        @media only screen and (min-width: 640px) {
                            margin-bottom: 12px;
                        }
                        @media only screen and (min-width: 1441px) {
                            font-size: 24px;
                            line-height: 28px;
                        }
                    }
                }
            }
        }
    }
}