.podcast-card {
    display: flex;
    gap: 20px;
    flex-direction: column;
    padding: 20px;
    align-items: start;

    background-color: #f2f0ea;
    border-radius: 6px;
    text-decoration: none;

    .podcast-thumbnail {
        align-self: center;
        position: relative;
        width: 100%;

        .podcast-thumbnail-image {
            display: block;
            width: 75%;
            border-radius: 6px;
            margin: auto;
            aspect-ratio: 1/1;
            object-fit: cover;
        }

        .podcast-date {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--coffee);
            padding: 20px;
            border-radius: 6px;
            
            text-align: center;
            text-transform: uppercase;
            font-family: Poppins;
            font-size: 12px;
            color: #FFFFFF;

            /* Makes date appear on 2 lines */
            display: block;
            box-sizing: border-box;
            max-width: calc(2em + 40px);
            overflow: 0;
        }
    }

    .podcast-card-body {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 20px;
        flex: 1 1 0;

        .podcast-content {
            display: block;
            flex: 1 1 0;
            background-color: #FFFFFF;
            padding: 30px 40px 10px;
            border-radius: 6px;
            width: 100%;
    

            .podcast-duration {
                font-family: Poppins;
                font-size: var(--small);
                font-weight: 400;
                color: var(--olive);
            }

            .podcast-title {
                font-family: Castoro;
                font-size: 24px;
                font-weight: 400;
                color: #1a1414;
                
                overflow-wrap: break-word;
                word-wrap: break-word; /* Backwards compatibility for older browsers */

                -webkit-hyphens: auto;     /* Safari support */
                hyphens: auto;             /* Standard property */
            }
        }

        .podcast-listen-more {
            margin-left: 20px;
            width: fit-content;

            color: var(--olive);
            font-size: 13px;
            font-family: Poppins;
        }
    }

}

@media screen and (max-width: 1024px) {
    .podcast-card {
        gap: 40px;
        flex-direction: row;

        .podcast-thumbnail {
            flex: 0 0 clamp(180px, 30%, 260px);
            width: clamp(180px, 30%, 260px);

            .podcast-thumbnail-image {
                width: 100%;
            }

            .podcast-date {
                top: 10px;
                right: 10px;

                padding: 10px;
                max-width: calc(2em + 20px);
            }
        }

        .podcast-card-body {
            .podcast-card-content {
                padding: 20px 40px;
            }
        }
    }
}
    @media screen and (max-width: 767px) {

    .podcast-card {
        gap: 20px;
        flex-direction: column;

        .podcast-thumbnail {
            width: 100%;

            .podcast-thumbnail-image {
                width: 100%;
            }

            .podcast-date {
                top: 20px;
                right: 20px;

                padding: 20px;
                max-width: calc(2em + 40px);
            }
        }
    }
}