@media screen and (max-width: 1024px) {
    .podcastName 
    {
        font-size: 3em;
        width: 90%;
        text-align: center;
        top: 40%;
    }
    .podcastDesc
    {
        top: 55%;
        width: 90%;
        font-size: 1.2em;
    }
    .playBackZone
    {
        width: 50%;
        height: 100px;
        top: 80%;
    }
    .sourceSection {
        position: absolute;
        top: 64%;
        width: 550px;
    }
    .sourceSection > .sourcePill > .sourceName
    {
        font-size: 0.9em;
    }
    .sourceSection > .sourcePill > .sourceLogo
    {
        width: 22px;
        height: 22px;
    }
}

@media screen and (max-width: 768px) {
    .podcastName 
    {
        font-size: 2.5em;
        width: 90%;
        text-align: center;
        top: 45%;
    }
    .podcastDesc
    {
        top: 60%;
        width: 90%;
    }
    .playBackZone
    {
        width: 50%;
        height: 120px;
        top: 80%;
    }
    .sourceSection {
        position: absolute;
        top: 70%;
        width: 550px;
    }
    .sourceSection > .sourcePill > .sourceName
    {
        font-size: 0.9em;
    }
    .sourceSection > .sourcePill > .sourceLogo
    {
        width: 22px;
        height: 22px;
    }
}
@media screen and (max-width: 600px) {
    .podcastName 
    {
        font-size: 1.5em;
        width: 80%;
        text-align: center;
        top: 45%;
    }
    .podcastDesc
    {
        top: 58%;
        font-size: 1em;
    }
    .playBackZone
    {
        width: 80%;
        height: 100px;
        top: 75%;
    }
    .playBackControls svg
    {
        width: 25px;
        height: 25px;
    }
    .sourceSection {
        position: absolute;
        top: 64%;
        width: 550px;
    }
    .sourceSection > .sourcePill > .sourceName
    {
        font-size: 0.9em;
    }
    .sourceSection > .sourcePill > .sourceLogo
    {
        width: 22px;
        height: 22px;
    }
}