.rc-programmation-podcastshow-grid {

    & .rc-programmation-podcastshow-item.musique {
        --theme-clr: #CBB4E8;
        --theme-clr-light: #E8DBFA;
    }

    & .rc-programmation-podcastshow-item.art-culture {
        --theme-clr: #F8DAEA;
        --theme-clr-light: #F8E6EF;
    }

    & .rc-programmation-podcastshow-item.jeunesse {
        --theme-clr: #FEEF88;
        --theme-clr-light: #FFF7C2;
    }

    & .rc-programmation-podcastshow-item.societe {
        --theme-clr: #C1DCF5;
        --theme-clr-light: #DFF0FF;
    }

    & .rc-programmation-podcastshow-item.environnement {
        --theme-clr: #BCD3C5;
        --theme-clr-light: #D8EBDF;
    }

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    & a {
        text-decoration: none !important;
        outline: none !important;
    }

    & .rc-programmation-podcastshow-item {
        background: #fff;
        border: 1px solid #2f2f2f;
        transition: 0.5s ease-in-out;

        & .podcastshow-infos {
            display: flex;
            align-items: center;
            min-height: 76px;
            background: var(--theme-clr);
        }

        & .podcastshow-cover {
            position: relative;
            aspect-ratio: 2 / 1.5;
            padding: 20px;
            display: flex;
            flex-flow: column wrap;
            justify-content: space-between;
            border-bottom: 1px solid #2f2f2f;
            transition: 500ms;
        }

        & .card-link {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        & .title {
            color: #2F2F2F;
            font-family: 'Poppins';
            font-size: 26px;
            font-weight: 600;
            line-height: 1.3;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        & .tags {
            z-index: 99;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            & a {
                color: #2F2F2F;
                font-family: 'Poppins';
                font-size: 12px;
                font-weight: 400;
                padding: 2px 10px;
                height: fit-content;
                border: 1px solid #2F2F2F;

                background: linear-gradient(to right, #2f2f2f);
                background-repeat: no-repeat;
                background-position: bottom right;
                background-size: 0% 100%;
                transition: background-size 300ms, color 500ms;

                &:hover {
                    color: #fff;
                    background-position: bottom left;
                    background-size: 100% 100%;
                }
            }
        }

        & .animator {
            padding: 18px 20px;
            margin: 0;
            color: #000;
            font-family: 'Poppins';
            font-size: 15px;
            font-weight: 500;
            line-height: 1.2;
        }

        & .hidden {
            display: none;

            & .dates {
                margin: 18px 12px 18px 20px;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            & .hours {
                padding: 18px 20px 18px 12px;
                border-left: 1px solid #2f2f2f;
                background: #fff;
                display: flex;
                align-items: center;
                height: 100%;
            }

            & p {
                margin: 0;
                color: #000;
                font-family: 'Poppins';
                font-size: 15px;
                font-weight: 500;
                line-height: 1.3;
            }
        }

        &:hover {
            transform: translate3d(-2px, -2px, 0.1px) !important;
            box-shadow: 8px 8px 0px 0px #2f2f2f !important;
        }

        &:hover .podcastshow-cover {
            background: var(--theme-clr-light);
        }

        &:hover .podcastshow-infos {
            display: block;
        }

        &:hover .animator {
            display: none;
        }

        &:hover .hidden {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            min-height: 76px;
            align-content: stretch;
            align-items: center;
        }
    }
}

.rc-programmation-podcastshow-pagination {
    display: flex;
    justify-content: end;
    gap: 2px;
    align-items: center;
    margin-top: 25px;

    & a {
        outline: none !important;
        text-decoration: none !important;
        color: #000;
        font-family: 'Poppins';
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        padding: 0 4px 2px;
        background: linear-gradient(to right, #2f2f2f);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 0% 1px;
        transition: background-size 500ms;

        &.active {
            font-weight: 600;
            background-size: 100% 1px;
        }

        &:hover {
            background-position: bottom left;
            background-size: 100% 1px;
        }
    }
}

@media screen and (width <=767px) {
    .rc-programmation-podcastshow-grid {
        grid-template-columns: 1fr !important;

        & .rc-programmation-podcastshow-item {

            & .podcastshow-cover {
                aspect-ratio: auto;
            }

            & .tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
        }
    }
    .rc-programmation-podcastshow-pagination {
        margin-top: 15px;
    }
}