#hero-header {height: 600px;}
#hero-header.background-image, #about {background-image: url('/userAssets/a3/cmsPages/image/automated-podcast-blueprint.jpeg'); background-size: cover; background-position: center;}
#about {padding: 4rem 0;}
#about p, #about h2 {margin: 0 0 1rem;}
#hero-overlay {display: flex; align-items: center; justify-content: space-between; height: 100%;}
#hero-header .hero-content {margin: 2rem;}
#hero-header .side-content {height: 100%; width: 24%; overflow: hidden; background-size: cover;}
#hero-header .side-content.left {background-image: url('/userAssets/a3/cmsPages/image/podcast-left.png'); background-position: center right;}
#hero-header .side-content.right {background-image: url('/userAssets/a3/cmsPages/image/podcast-right.png'); background-position: center left;}

#hero-header h2 {font-size: clamp(1rem, 0.5833rem + 1.3333vw, 2.25rem);}
#hero-header p {font-size: 15px;}
#hero-header .main-content {background-image: url('/userAssets/a3/cmsPages/image/podcast-name-box.png'); background-size: contain; background-repeat: no-repeat; background-position: center; padding: 2rem; aspect-ratio: 10/3; margin: 0 0 2rem;}
#podcast iframe, #podcast i {margin: 0 0 3rem;}
#podcast i {font-size: 3rem;}
#podcast .label {font-weight: bold; color: var(--main-blue); text-transform: uppercase;}
#podcast .label.txt-color-white {color: white;}
#host h2.larger {font-size: 2rem;}
#subscribe-cta a {margin: 0 2rem;}
#socials h2 {line-height: 1.8;}
#socials :is(h2, a) {margin: 0 1rem;}
#podcast a i {color: var(--white);}
#podcast a:hover i {color: var(--main-blue);}

@media (min-width: 640px){
    #hero-header.background-image {height: 500px;}
    #hero-header .hero-content {width: 50%; margin: 2rem 0;} 
    #about .left-w-border {padding-right: 2rem; border-right: 2px solid white;}
    }

/*// FOR THE LANDING PAGE*/
#hero-header h1 {font-size: clamp(2rem, 0.6667rem + 4.2667vw, 6rem); width: 100%;}
#episodes h2 {margin: 0 2.03252% 1rem; font-size: 1rem; border-bottom: 1px solid var(--main-blue); padding-bottom: 0.25rem; }
#episodes h3 {margin: 1rem 0 0;}

/*// FOR EPISODE PAGES*/
#hero-header h2 {font-size: clamp(1rem, 0.5833rem + 1.3333vw, 2.25rem);}
#hero-header h2#automated {font-size: clamp(2rem, 0.6667rem + 4.2667vw, 6rem); width: 100%;}
#episode time {color: var(--white); font-weight: 700;}
#episode button {border: 1px solid white; color: white; background-color: transparent; border-radius: 0; padding: 1rem 2rem;}
#episode button:hover {background-color: #0B67B2; border: none;}
#transcript { max-height: 750px; overflow-y: auto; overflow-x: hidden; padding-right: 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.4) transparent; }
#transcript p {font-size: 0.75rem; margin: 0 0 0.5rem;}
#transcript p.time {font-weight: bold; margin: 0;}