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

.even-organizer{
    .even-organizer-card{
        background: $LightCream;
        padding: 20px;
        position: relative;
        transition: all 0.6s;
        text-align: center;
        z-index: 1;
        @media only screen and (min-width: 768px) {
            text-align: start;
        }
        @media only screen and (min-width: 1200px) {
            padding: 30px 40px;
        }
        @media only screen and (min-width: 1600px) {
            padding: 50px 60px;
        }
        .title{
            color: $tertiary;
        }
        .card-btn{
            &:hover{
                background: $white;
                color: $btnText;
                border-color: $white;
            }
        }
        .content-wrapper{
            text-align: left;
            @media only screen and (min-width: 768px) {
                padding-right: 30px;
                max-width: 580px;
            }
            @media only screen and (min-width: 1024px) {
                max-width: 720px;
            }
            @media only screen and (min-width: 1200px) {
                max-width: 590px;
            }
            @media only screen and (min-width: 1600px) {
                max-width: 740px;
            }
            h3,p{
                transition: all 0.6s;
                margin-bottom: 10px;
                @media only screen and (min-width: 1600px){
                    margin-bottom: 20px;
                }
            }
            .event-organizer-listing{
                li{
                    margin-bottom: 5px;
                    i{
                        margin-right: 10px;
                        color: $primary;
                        transition: all 0.6s;
                        font-size: 14px;
                        line-height: 1.3;
                        @media only screen and (min-width: 640px){
                            font-size: 16px;
                            line-height: 1.4;
                        }
                        @media only screen and (min-width: 768px){
                            font-size: 18px;
                        }
                        @media only screen and (min-width: 1200px){
                            margin-right: 15px;
                        }
                        @media only screen and (min-width: 1600px){
                            font-size: 22px;
                        }
                    }
                    p{
                        margin-bottom: 0;
                    }
                }
            }
        }
        .image-wrapper{
            margin: 20px auto;
            @media only screen and (min-width: 768px) {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 100px;
                margin: auto;
                opacity: 0.5;
                z-index: -1;
                img{
                    margin: auto;
                }
            }
            @media only screen and (min-width: 1024px) {
                left: 50%;
                right: auto;
                transform: translateX(-44px);
            }
            @media only screen and (min-width: 1200px) {
                opacity: 1;
            }
            @media only screen and (min-width: 1440px) {
                transform: translateX(-44px);
            }
            @media only screen and (min-width: 1600px) {
                transform: translateX(-100px);
            }
            img{
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
            .hover{
                display: none;
            }
        }
        &:hover{
            background: $primary;
            transition: all 0.6s;
            .content-wrapper{
                h3,.title,p{
                    color: $white;
                    transition: all 0.6s;
                }
            }
            .image-wrapper{
                img{
                    display: none;
                }
                .hover{
                    display: block;
                }
            }
            .event-organizer-listing{
                li{
                    i{
                        color: $white;
                    }
                }
            }
        }
    }
}