///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.casino-events-container {
    @include outer-container;
    margin: 50px auto 50px auto;
}

.casino-events-title {
    text-align: center;
    font-family: "lucien-light";
    text-transform: uppercase;
    font-size: 2em;
}

.casino-events-subtitle {
    text-align: center;
    margin: 10px 0 50px 0;
}

.casino-events-list
{
    display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
    list-style: inside none;
}

.casino-events-list-item
{
    display: block;
    text-align: center;
}

.casino-list-item-image {
    display: block;

    picture
    {
        display:  block;
        height:   300px;
        overflow: hidden;
        position: relative;
    }
    img {
        @include cover;
        transition: all .2s ease;
    }
    &:hover {
        img {
            transform: translateX(-50%) translateY(-50%) scale(1.05);
        }
    }
}

.casino-list-item-button
{
    display: inline-block;
    margin-bottom: 0;
    margin-top: 35px;

    span
    {
        text-transform: uppercase;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet :: LANDSCAPE
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .casino-list-item-image
    {
        picture
        {
            height:   auto;
            overflow: visible;
            position: static;
        }
        img
        {
            max-height: none;
            max-width:  none;
            min-height: 0;
            min-width:  0;
            position:   static;
            transform:  none;
            width:      100%;
        }
        &:hover
        {
            img
            {
                transform: none;
            }
        }
    }
    .casino-list-item-button {
        margin: 20px 0 0;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet :: PORTRAIT
///////////////////////////////////////////////////////////////

@include tablet-portrait-and-below {

    .casino-events-subtitle {
        padding: 0 20px;
    }
    .casino-list-item-button
    {
        padding: 1rem 2rem;
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below
{
    .casino-events-list
    {
        grid-template-columns: 1fr;
    }
}

