:root {
        /* Grid view */
        --promo-card-max-width: 338;
    }

    /* Promo item, in grid/list view */
    /**/
    /*    SECTIONS:*/
    /*    - Image-top*/
    /*    - Title*/
    /*    - Period (range)*/
    /*    - DateTime (weekday/hour)*/
    /*    - Location*/
    /*    - Tickets/Buy*/
    /*    - Prices*/
    /*    - More info*/
    /*    - #places free*/
    /*#}*/

    /* General */
    .promo-item {
        box-shadow: 0px 30px 40px -20px grey;
        border-top: 1px solid var(--theme-primary-color);
        border-bottom: 1px solid var(--theme-secondary-color);
    }

    .promo-item-image-top {
        max-width: var(--promo-card-max-width) !important;
        height: 170px;
        width: auto;

        object-fit: contain;

        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: white;
        border-bottom: 1px solid lightgrey;
        /*align-content: center;*/
        /*text-align: center;*/
    }

    .promo-item-body {
        flex: 1 1 auto;
        padding: 8px;
        background: linear-gradient(225deg, #efefef, white);
    }

    /* Inside the body */
    .promo-item-title {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 12px;
    }

    /* Inside the body */
    .promo-item-location {
        font-size: 15px;
        padding-bottom: 3px;
    }

    /* Inside the body */
    .promo-item-price {
        font-size: 18px;
        padding-bottom: 3px;
    }

    /* Inside the body */
    .promo-item-date {
        font-weight: 700;
        color: grey;
    }

    /* Inside the body */
    .promo-item-weekday {
        font-weight: 700;
        padding-bottom: 0px;
        color: grey;
    }

    /* Inside the body */
    .promo-item-text {
        font-size: small;
        padding-top: 10px;
    }

    .promo-item-footer {
        text-align: center;
        padding: 12px;
        background-color: rgba(211, 211, 211, 0.4);
    }

    .promo-item.zoom {
        transition: transform .5s; /* Animation */
    }

    .promo-item.zoom:hover {
        transform: scale(1.04);
    }


    /*-----------*/
    /* Grid view */
    /*-----------*/
    .grid-item-S .card:hover{
        /* Enable hover */
        pointer-events: initial;
    }
    .grid-item-S .card {
        max-width: 338px;
        /* Disable click to toggle expand */
        /*pointer-events: none;*/
        /*cursor: pointer;*/
    }
    .grid-item-S .promo-item-body {
        /* Disable click to toggle expand */
        pointer-events: none;
    }
    .grid-item-S .promo-item-body .promo-item-location {
        /* Disable click to toggle expand, EXCEPT for location */
        pointer-events: initial;
    }
    .grid-item-S .promo-item-date::before {
        /* Newline before .promo-item-date */
        content: "\a";
        white-space: pre;
    }


    /*-----------*/
    /* List view */
    /*-----------*/
    .grid-item-L .card {
        /* no border radius */
        border-radius: 0px !important;
    }
    .grid-item-L .promo-item-date {
        /* date & weekday on 1 line */
        display: inline;
    }
    .grid-item-L .promo-item-weekday {
        /* date & weekday on 1 line */
        display: inline;
    }


    /*-----------*/
    /* Chevron */
    /*-----------*/
    .chevron::before {
        border-style: solid;
        border-width: 0.25em 0.25em 0 0;
        content: '';
        display: inline-block;
        height: 1em;
        left: 0.15em;
        position: relative;
        top: 0.15em;
        transform: rotate(-45deg);
        vertical-align: top;
        width: 1em;
        margin-right: 10px;
    }

    .chevron.left:before {
        left: 0;
        transform: rotate(45deg);
        transition: all 0.5s ease;
    }

    .chevron.up:before {
        top: 0;
        transform: rotate(135deg);
        transition: all 0.5s ease;
    }

    .chevron.down:before {
        top: 0;
        transform: rotate(-45deg);
        transition: all 0.5s ease;
    }

    .chevron.right:before {
        left: 0.25em;
        transform: rotate(-135deg);
        transition: all 0.5s ease;
    }