@import "../../styles/variables";

.event-card {
    &-cap {
        position: relative;
        overflow: hidden;
    }

    &-img {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        z-index: -1;
        transform: translateY(-50%);

        img {
            width: 100%;
        }
    }

    &-title {
        background: rgba($color-black, 0.7);
        padding: 60px 0 40px;
        color: $color-white;

        h2 {
            font-size: 3rem;
            font-weight: $bold;
        }

        .country {
            font-size: 2rem;
            font-weight: $light;
        }

        .event-type {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .date {
            text-align: right;

            p {
                display: inline-block;
                font-weight: $bold;
                font-size: 2rem;
                padding: 0 10px;
                background: rgba($color-white, 0.7);
                color: $color-black;
            }

            span {
                &:first-child {
                    font-weight: $normal;
                }

                &:last-child {
                    font-size: 1.4rem;
                    font-weight: $normal;
                }
            }
        }
    }

    &-info {
        p {
            font-size: 1.4rem;
            margin-bottom: 10px;
        }
    }
}