/* Artwork blends into the card rather than sitting in an inset thumbnail. */
body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh,.treehouse-refresh) .section-cards .tile-image{position:relative;overflow:hidden;width:100%;border-radius:14px 14px 0 0}
body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .tile-image svg{width:100%;height:100%;display:block;mix-blend-mode:darken;mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%);mask-size:100% 100%;-webkit-mask-size:100% 100%}
body.treehouse-refresh .section-cards .tile-image img{width:100%;height:100%;object-fit:cover;object-position:50% 47%;mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%)!important;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%)!important}
body.home-landing .categories .card .art{background-size:92% auto;mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 48%,transparent 76%)}
@media(min-width:651px){
 html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .section-cards .tile-image{height:240px;aspect-ratio:auto}
 html:not(.desktop-view) body.treehouse-refresh .page main .categories .tile-image{height:245px!important}
}
@media(min-width:651px) and (max-height:1100px) and (orientation:portrait){
 html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .section-cards .tile-image{height:145px}
 html:not(.desktop-view) body.treehouse-refresh .page main .categories .tile-image{height:140px!important}
}
@media(max-width:650px){body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .tile-image svg{mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,#000 50%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,#000 50%,transparent 78%)}}