.event {
    word-break: break-all;
    .card {
        &__title {
            transition: color 0.3s;
            margin-top: 5px;
            color: $black;
            word-break: break-word;
        }
        &__description {
            margin-top: 5px;
            color: $green;
        }
        &__text {
            margin-top: 10px;
        }
        %__location {
            color: $black;
        }
        &.card--bg-img {
            min-height: 508px;
            cursor: pointer;
            @media(max-width: $mobile) {
                min-height: 0;
            }
        }
        &:hover {
            .card__title {
                color: $green;
            }
        }
    }
}
.card {
    position: relative;
    background-size: cover;
    margin-right: 17.5px;
    &__content {
        padding: 20px 10px 0;
        line-height: initial;
        @media(max-width: $mobile) {
            padding: 20px 0 0;
        }
    }
    &__subtitle {
        font-family: $poppins;
        font-weight: 600;
        font-size: 16px;
        color: $black;
        letter-spacing: 0.4px;
        line-height: 22px;
    }
    &__img {
        position: relative;
        height: 0;
        padding-bottom: 100%;
        min-height: 350.33px;
        background: $light-grey;
        @media(max-width: 1206px) {
            min-height: auto;
        }
        .progressive-img {
            width: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
        }
    }
    &__price {
        font-family: $poppins;
        font-size: 16px;
        color: $grey;
        letter-spacing: 0.4px;
        line-height: 22px;
    }
    &__above {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        transition: all .3s ease-in;
        top: 0;
        left: 0;
        pointer-events: none;
        &__img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity .3s;
            height: 100%;
            >img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
            &.js--active {
                opacity: 1;
            }
        }
    }
    &__prefix {
        font-family: $poppins;
        font-weight: 600;
        font-size: 16px;
        color: $black;
        letter-spacing: 0.4px;
        line-height: 22px;
        position: relative;
        z-index: 1;
    }
    &__title {
        color: $black;
        font-family: $poppins;
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
        position: relative;
        letter-spacing: 0;
        z-index: 1;
        @media(max-width: $tablet_900px){
            font-size: 26px;
            line-height: 36px;
        }
    }
    &__description {
        font-family: $poppins;
        font-weight: 600;
        font-size: 16px;
        color: $black;
        letter-spacing: 0.4px;
        line-height: 22px;
        position: relative;
        transition: color .3s;
        z-index: 1;
        &--addon {
            color: $black;
            font-family: $lato;
            font-size: 14px;
            font-weight: 300;
            line-height: 20px;
            letter-spacing: normal;
            margin-top: 5px;
        }
        &--project {
            font-size: 14px;
            font-weight: 300;
        }
    }

    &__authors {
        &:before {
            content: 'By: ';
        }
        position: relative;
        color: $black;
        font-family: $poppins;
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 0.35px;
        line-height: 24px;
        margin-bottom: 11px;
        display: inline-block;
        width: 100%;
        >div {
            display: inline;
        }
        .btn {
            color: $black;
            font-family: $poppins;
            font-size: 14px;
            font-weight: 300;
            letter-spacing: 0.35px;
            line-height: 24px;
            width: auto;
            display: inline;
        }
    }
    &__text {
        font-family: $lato;
        font-size: 21px;
        font-weight: 300;
        color: $black;
        letter-spacing: normal;
        line-height: 30px;
        margin-top: 10px;
        position: relative;
    }
    &__location {
        font-family: $poppins;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.4px;
        line-height: 22px;
        margin-top: 20px;
        color: $black;
        position: relative;
        transition: color .3s;
    }
    &__calendar-icon {
        position: absolute;
        bottom: 40px;
        left: 50px;
        
    }
    &__links {
        z-index: 1;
        &-slider {
            .card {
                &__links {
                    a {
                        display: block;
                        text-align: center;
                    }
                }
            }
        }
        margin-top: 40px;
        position: relative;
        a {
            display: block;
            text-align: left;
            line-height: 32px;
        }
        &--addon {
            margin-top: 20px;
        }
    }
    &__file {
        .btn {
            color: $black;
            font-family: $poppins;
            font-size: 13px;
            font-weight: 300;
            letter-spacing: 0.33px;
            line-height: 20px;
            text-decoration: underline;
            margin-top: 10px;
        }
    }
    &__label {
        text-align: center
    }
    &__links-slider {
        width: 100%;
        position: relative;
        >div {
            height: 100%;
        }
        .swiper-container {
            overflow: visible;
            /* .small-card {
                height: 100%;
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: flex-end;
                flex-wrap: wrap;
                background-size: cover;
                >div {
                    margin-top: 40px;
                    position: absolute;
                }
            } */
        }
    }
    &--bg-img {
        background-position: center;
        background-color: $light-grey;
        box-shadow: 0 12px 19px -10px rgba(17,4,34,0.52);
        @media(max-width: $mobile) {
            background-image: none !important; // The reason why i used !important here is because it's better in this specific occasion where background-image is being set through javascript when not in mobile, it's more efficient to set this to important instead of having javascript logic
            box-shadow: none;
            background-color: #FFF;
        }
    }
    &--medium {
        min-height: 510px;
        margin-bottom: 0;
        width: 100%;
        padding: 80px 40px 40px;
        background-position: top;
        background-size: cover;
        background-color: $light-grey;
        box-shadow: 0 12px 19px -10px rgba(17,4,34,0.52);
        .card__title {
            font-family: $poppins;
            font-size: 32px;
            letter-spacing: 0;
        }
        @media(max-width: $mobile){
            width: 100%;
            margin-right: 0;
        }
        .card__text {
            @media (max-width: $mobile) {
                display: none;
            }
        }
        &:nth-child(even) {
            margin-bottom: 120px;
            margin-left: 17.5px;
            margin-right: 0;
            @media(max-width: $mobile){
                width: 100%;
                margin-right: 0;
                margin-left: 0;
                margin-top: 0;
                margin-bottom: 60px;
            }
        }
        &.card--carousel {
            .mask-black {
                display: none;
            }
            @media(max-width: $mobile){
                background-color: transparent;
                padding: 0;
                width: 100%;
                margin-right: 0;
                box-shadow: none;
                min-height: auto;
            }
            .card__title {
                @media(max-width: $mobile) {
                    font-size: 24px;
                    letter-spacing: 0;
                    line-height: 33px;
                }
            }
            .card__description {
                @media(max-width: $mobile) {
                    font-size: 12px;
                    letter-spacing: 0.3px;
                    line-height: 22px;
                }
            }
            .card__img{
                &.card--mobile {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    overflow: hidden;
                    padding-bottom: 0;
                    @media(max-width: $mobile) {
                        position: relative;
                        max-height: 280px;
                        display: block;
                        margin-bottom: 20px;
                        padding-bottom: 100%;
                        height: 0;
                    }
                    img {
                        /* filter: opacity(0.5) brightness(2) grayscale(1); */
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
    }
    &--big {
        width: calc(50% - 17.5px);
        margin-bottom: 60px;
        padding: 70px 50px 40px;
        min-height: 600px;
        margin-right: 17.5px;
        @media(max-width: $mobile){
            width: 100%;
            min-height: 0;
            padding-right: 0;
            padding-left: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
        &:nth-child(even) {
            margin-bottom: 120px;
            margin-left: 17.5px;
            padding-right: 0;
            @media(max-width: $mobile){
                width: 100%;
                margin-right: 0;
                margin-left: 0;
                margin-top: 0;
                margin-bottom: 60px;
            }
        }
        &.card--carousel {
            .mask-black {
                display: none;
            }
        }
        &.card--eventlist {
            .mask-black {
                display: none;
            }
        }
    }
    &--full-width {
        width: 100%;
    }
    &--event {
        min-height: 508px;
        @media(max-width: $mobile) {
            min-height: 0;
        }
        .mask-black {
            display: none;
        }
        .card__prefix {
            margin-bottom: 5px;
        }
        .card__title {
            transition: color 0.3s;
            margin-bottom: 5px;
            line-height: 45px;
        }
        .card__description {
            margin-bottom: 20px;
            color: $green;
        }
        .card__text {
            margin-bottom: 38px;
            font-size: 17px;
            line-height: 24px;
        }
        &:hover {
            .card__title {
                color: $green;
            }
        }
    }
    &--eventlist {
        .mask-black {
            display: none;
        }
    }
    &--textwhite {
        .card__prefix, .card__title, .card__description, .card__text {
            color: $white;

            @media(max-width: $mobile) {
                color: $black;
            }
        }
    }
    &--tutorial {
        .card {
            &--text {
                margin-top: 5px;
                color: $black;
                font-family: $lato;
                font-size: 21px;
                font-weight: 300;
                line-height: 30px;
            }
        }
    }
    .mask-black {
        opacity: 1;
        background: rgba(17, 4, 34, 0.25);
        position: absolute;
        width: 100%;
        max-width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        display: block;
        top: 0;
        left: 0;

        @media(max-width: $mobile) {
            display: none;
        }

        & > div {
            opacity: 0.3;
            background-image: linear-gradient(180deg, rgba(39,9,71,0.00) 0%, #110422 100%);
            position: absolute;
            width: 100%;
            max-width: 100%;
            height: 100%;
            pointer-events: none;
        }
    }
}