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

.event-list-wrapper{
    li{
        font-size: 14px;
        line-height: 16px;
        color: $btnText;
        gap: 12px;
        @media only screen and (min-width: 640px) {
            gap: 16px;
        }
        @media only screen and (min-width: 1440px) {
            gap: 20px;
        }
        a{
            line-break: anywhere;
            color: $btnText;
            &:hover{
                color: $tertiary;
            }
        }
        .icon{
            width: 34px;
            height: 34px;
            border: 1px solid $primary;
            flex-shrink: 0;
            @media only screen and (min-width: 640px) {
                width: 40px;
                height: 40px;
            }
            @media only screen and (min-width: 1440px) {
                width: 50px;
                height: 50px;
            }
            i{
                font-size: 16px;
                color: $primary;
                @media only screen and (min-width: 640px) {
                    font-size: 20px;
                }
                @media only screen and (min-width: 768px) {
                    font-size: 24px;
                }
            }
            .ns-icon{
                background-color: $primary;
            }
        }
        div,a{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: $primary;
        }
        span{
            font-family: 'Avenir Next';
            &.head{
                font-size: 16px;
                line-height: 1.3;
                font-weight: 500;
                color: $black25;
                margin-bottom: 5px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                @media only screen and (min-width: 1441px) {
                    font-size: 20px;
                }
                .icon-EUR{
                    font-size: 12px;
                    @media only screen and (min-width: 1441px){
                        font-size: 16px;
                    }
                }
            }
        }
        .small-text{
            font-size: 16px;
            line-height: 1.62;
            font-weight: 400;
            color: $grey5E;
        } 
        + li{
            margin-top: 20px;
            @media only screen and (min-width: 1200px) {
                margin-top: 30px;
            }
        }
    }
}