@import url("fa/css/all.min.css");

* {
    margin: 0;
    padding: 0;
    scrollbar-color: #454a4d #202324;
    color: #e8e6e3;
}
*, ::before, ::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    font-family: 'Rubik',Helvetica,Arial,Lucida,sans-serif;
}
body {
    font-family: 'Rubik',Helvetica,Arial,Lucida,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: rgb(38, 42, 43);
    color: #e8e6e3;
}
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr {
    margin: 0;
    padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
.gb-hero {
    background: linear-gradient(120deg, rgb(72, 18, 87) 0%, rgb(38, 42, 43) 100%), none;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}
#hero-duration {
	background: rgb(93, 23, 113);
  	height: 5px;
}

/* OUTPUT BODY */
.gb-hero .body {
    margin: auto auto;
    max-width: 64rem;
}
.output-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-around;
}
.output-info {
    text-shadow: 0 1px 2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.21);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
.output-control {
    background: transparent;
    border: none;
    padding: 0;
}
.output-control i {
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(0, 0, 0, 0.21) 0px 2px 4px;
}
.output-control i:hover {
    transform: scale(1.05);
}
.output-control i:active {
    transform: scale(0.9);
}
.output-text {
    -webkit-margin-start: 1rem;
    margin-inline-start: 1rem;
}
.output-eyebrow {
    font-size:.875rem;
    text-transform:uppercase;
    font-weight:700;
    line-height:1.25rem;
    opacity:.8
}
.output-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
}
.output-secondary {
    opacity: .9;
    margin-top: .25rem
}

/* OUTPUT FIGURE */
.gb-hero .output {
    display: flex;
    flex-wrap: nowrap;
}
.output-figure {
    flex-shrink: 0;
    align-self: center;
}
.output-img-wrapper {
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
    background: rgba(24,24,27,.1);
}
.output-img { 
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    max-width:100%;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:50% 50%;
    object-position:50% 50%;
    margin:auto auto
}
.output-img-full {
    width:100%;
    height:100%
}
.output-song {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    display: flex;
    flex-direction: row;
    padding: .75rem;
    -webkit-padding-before: 1.25rem;
    padding-block-start: 1.25rem;
    -webkit-padding-end: .5rem;
    padding-inline-end: .5rem;
    align-items: center;
}
.output-song .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    align-items: flex-start;
    font-size: .875rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.21);
}
.output-song .title {
    margin-bottom: .25rem;
}
.output-affiliate {
    position: absolute;
    top:.5rem;
    right: .5rem;
    line-height: 0;
}
.output-affiliate:hover {
    opacity: .8;
}

/* CONTACT */
.gb-hero .contact {
    text-align: center;
    position: relative;
}
.contact-list-wrapper {
    color: #fff;
    margin-top: 0;
}
.contact-toggle {
    display: none;
    text-decoration: none;
}
.contact-toggle-label {
    margin-left: .5rem;
}
.contact-list {
    margin: 0 auto;
    max-width: 64rem;
    width: 100%;
    list-style: none;
    justify-content: space-around;
    display: flex;
    flex-direction: row;
    text-align: start;
    gap: .75rem 1rem;
    min-height: 3.25rem;
}
.contact-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.contact-list-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .5rem;
    margin: -0.5rem;
    text-decoration: none;
}
.contact-list-label {
    -webkit-margin-start:.75rem;
    margin-inline-start:.75rem
}

/* LOGO */
.gb-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #e8e6e3;
}
.gb-logo .icon {
    margin-bottom: 1rem;
    -o-object-position: 0 50%;
    object-position: 0 50%;
    max-height: 8rem;
    object-fit: scale-down;
    display: block;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(0, 0, 0, 0.21) 0px 2px 4px;
    border: 1px solid rgb(53, 57, 59);
}
.gb-logo .text {
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .1px;
}
.gb-logo .text .name {
    font-weight: 700;
    font-size: 3rem;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px, rgba(0, 0, 0, 0.21) 0px 2px 4px;
}
.gb-logo .text .operating {
    font-size: .9rem;
    margin-bottom: -.3rem;
}
.gb-logo .text .copyright {
    font-size: .9rem;
    margin-top: -.3rem;
}

/* AUDIO BARS */
.gb-audiobars {
    display: inline-flex;
}
.gb-audiobars span {
    background: #fff;
    display: inline-flex;
    width: 4px;
    height: 12px;
    -webkit-margin-start: .125rem;
    margin-inline-start: .125rem;
    -webkit-animation-name: audiobars;
    animation-name: audiobars;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    transform-origin: bottom;
}
.gb-audiobars span:nth-child(1) {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function: cubic-bezier(0.26, 1.65, 0.62, -0.6);
    animation-timing-function: cubic-bezier(0.26, 1.65, 0.62, -0.6);
}
.gb-audiobars span:nth-child(2) {
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: cubic-bezier(0.52, 1.32, 0.82, 0.27);
    animation-timing-function: cubic-bezier(0.52, 1.32, 0.82, 0.27);
    -webkit-animation-name: audiobars2;
    animation-name: audiobars2;
}
.gb-audiobars span:nth-child(3) {
    -webkit-animation-timing-function: cubic-bezier(0.85, 0.31, 0.08, 0.91);
    animation-timing-function: cubic-bezier(0.85, 0.31, 0.08, 0.91);
}
.gb-audiobars span:nth-child(4) {
    -webkit-animation-duration: .7s;
    animation-duration: .7s;
    -webkit-animation-timing-function: cubic-bezier(0.19, 1.03, 0.46, -0.5);
    animation-timing-function: cubic-bezier(0.19, 1.03, 0.46, -0.5);
    -webkit-animation-name: audiobars2;
    animation-name: audiobars2;
}
.output-eyebrow .gb-audiobars {
    -webkit-margin-start:.25rem;
    margin-inline-start:.25rem
}
@media(prefers-reduced-motion: reduce) {
    .gb-audiobars span:nth-child(1) {
        transform: scaleY(0.4);
        -webkit-animation-duration: 0s;
        animation-duration: 0s
    }
    .gb-audiobars span:nth-child(2) {
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
        transform: scaleY(1.1);
    }
    .gb-audiobars span:nth-child(3) {
        transform: scaleY(0.7);
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
    }
    .gb-audiobars span:nth-child(4) {
        transform: scaleY(0.9);
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
    }
}
@keyframes audiobars {
    from {
        transform: scaleY(1);
    } 
    to {
        transform: scaleY(0.1);
    }
}
@keyframes audiobars2 {
    from {
        transform: scaleY(1.3);
    }
    to {
        transform: scaleY(0.2);
    }
}
@-webkit-keyframes audiobars {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0.1);
    }
}
@-webkit-keyframes audiobars2 {
    from {
        transform: scaleY(1.3);
    }
    to {
        transform: scaleY(0.2);
    }
}

/* SIZING */
@media(max-width: 21.24em) {
    .gb-hero .output-img-wrapper {
        width:8rem;
        height:8rem
    }
}
@media(min-width: 21.25em) and (max-width: 29.99em) {
    .gb-hero .output-img-wrapper {
        width:9rem;
        height:9rem
    }
}
@media(min-width: 30em) {
    .gb-hero .output-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .content {
        padding: 2rem 0;
    }
}
@media(min-width: 30em) and (max-width: 39.99em) {
    .gb-hero .output-img-wrapper {
        width:16rem;
        height:16rem
    }
}
@media(max-width: 29.99em) {
    .content .wrapper #xfeed {
        --feed-scroller-item-size: 8rem;
    }
}
@media(max-width: 39.99em) {
    .content .wrapper #xfeed {
        --feed-scroller-item-size: 10rem;
    }
    .gb-hero .output-img-wrapper-live {
        width:16rem;
        height:16rem
    }
    .gb-hero .output-eyebrow {
        font-size:.75rem
    }
    .gb-logo .text {
        display: none;
    }
    .gb-logo {
        justify-content: center;
    }
    .gb-hero .contact .contact-list-wrapper {
        display: none;
    }
  	#hero-duration {
  		display: none;
  	}
    @supports((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
        .gb-hero .contact .contact-list-wrapper {
            background: rgba(24,24,27,.7);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
        }
    }
    @supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
        .gb-hero .contact .contact-list-wrapper {
            background: rgba(24,24,27,.9);
        }
    }
    .gb-hero .contact .contact-list-wrapper.is-showing {
        top: auto;
        bottom: calc(100% + .75rem);
        -webkit-animation-name: fade-fall-up;
        animation-name: fade-fall-up;
    }
    .gb-hero .contact .contact-toggle {
        display: inline-flex;
        font-size: .875rem;
        font-weight: 700;
        color: #fff;
        margin: 0 auto 1.5rem auto;
        border: 0;
        padding: .5rem 1rem;
        border-radius: 9999px;
        align-items: center;
    } 
    @supports((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
        .gb-hero .contact .contact-toggle {
            background:rgba(24,24,27,.5);
            -webkit-backdrop-filter:blur(4px);
            backdrop-filter:blur(4px)
        }
    }
    @supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
        .gb-hero .contact .contact-toggle {
            background:rgba(24,24,27,.6)
        }
    }
}
@media(min-width: 40em) {
    .gb-hero .output-text {
        -webkit-margin-start: 1.5rem;
        margin-inline-start: 1.5rem;
    }
    .gb-hero .output-title {
        font-size: 1.5rem;
        line-height: 2.2rem;
    } 
    .output-song-info {
        font-size: 1rem;
    }
    .c-hero-contact--multiple-items .c-hero-contact__list {
        justify-content: space-between;
    }
    .content .wrapper .title {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}
@media(min-width: 40em) and (max-width: 63.99em) {
    .gb-hero .output-img-wrapper {
        width:18rem;
        height:18rem
    }
    .content .wrapper #xfeed {
        --feed-scroller-item-size: 12rem;
    }
}
@media(max-width: 47.99em) {
    .gb-hero .body {
        padding: 2rem 1rem;
    }
    .gb-hero .output {
        flex-direction: column;
    }
    .gb-hero .output-info {
        margin-left: auto;
        margin-right: auto;
        margin-top: .75rem;
    }
    .gb-hero .output-figure {
        margin-top: 1.5rem;
    }
    .gb-hero .output-secondary {
        display: none;
    }
    .content-title {
        font-size: 1.875rem;
        line-height: 2rem;
    }
}
@media(min-width: 48em) {
    .gb-hero .body {
        padding: 3.5rem 1rem;
    }
    .gb-hero .output {
        flex-direction: row;
    }
    .gb-hero .output-info {
        max-width: 36rem;
        margin-top: 1rem;
    }
    .gb-hero .output-figure {
        -webkit-margin-start: 1.5rem;
        margin-inline-start: 1.5rem;
    }
    .content .wrapper .title {
        font-size: 1.875rem;
        line-height: 2rem;
    }
}
@media(max-width: 63.99) {
    .content .wrapper #xfeed {
        --feed-scroller-item-size: 12rem;
        grid-template-columns: repeat(auto-fill, minmax(var(--feed-scroller-item-size), var(--feed-scroller-item-size)));
        grid-auto-columns: minmax(var(--feed-scroller-item-size), var(--feed-scroller-item-size));
        grid-auto-flow: column;
        margin: 0 -1rem;
        display: grid;
        gap: 1rem;
        width: calc(100% + 1rem + 1rem);
        padding: 0 1rem;
        overflow-y: auto;
        overscroll-behavior-x: contain;
        -ms-scroll-snap-type: x proximity;
        scroll-snap-type: x proximity;
    }
    .content .wrapper #xfeed .item {
        scroll-snap-align: start;
        scroll-margin-inline: 1rem;
    }
}
@media(min-width: 64em) {
    .output-img-wrapper {
        width: 20rem;
        height: 20rem
    }
    .gb-hero .output-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

@supports((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .contact-list-wrapper {
        background: rgba(24,24,27,.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
    .contact-list-wrapper {
        background: rgba(24,24,27,.6);
    }
}
@supports(aspect-ratio: auto) {
    .content .wrapper #xfeed .item .media {
        aspect-ratio: 4/3;
    }
}
@supports not (aspect-ratio: auto) {
    .content .wrapper #xfeed .item .media {
        padding-top: 75%;
    }
}

/* FEED */
.c-page-content__title {
    font-size:1.25rem;
    line-height:1.75rem;
    font-weight:700;
    margin-bottom:1rem 
}
@media(min-width: 40em) {
    .c-page-content__title {
        font-size:1.5rem;
        line-height:2rem 
   }
}
@media(min-width: 48em) {
    .c-page-content__title {
        font-size:1.875rem;
        line-height:2rem 
   }
}
.o-wrapper {
    max-width:64rem;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding-left:1rem;
    padding-right:1rem 
}
.o-wrapper--small {
    max-width:48rem 
}
.c-page-content {
    padding: 1.5rem 0 
}
@media(min-width: 30em) {
    .c-page-content {
        padding:2rem 0 
   }
}
.c-page-content__section:not(:last-child) {
    margin-bottom:1.5rem 
}
@media(min-width: 30em) {
    .c-page-content__section:not(:last-child) {
        margin-bottom:2rem 
   }
}
.c-page-content__title {
    font-size:1.25rem;
    line-height:1.75rem;
    font-weight:700;
    margin-bottom:1rem 
}
@media(min-width: 40em) {
    .c-page-content__title {
        font-size:1.5rem;
        line-height:2rem 
   }
}
@media(min-width: 48em) {
    .c-page-content__title {
        font-size:1.875rem;
        line-height:2rem 
   }
}
.c-feed--grid {
    display:grid 
}
@media(max-width: 39.99em) {
    .c-feed--grid {
        gap:1rem 
   }
}
@media(min-width: 40em) {
    .c-feed--grid {
        gap:1.25rem 
   }
}
@media(max-width: 47.99em) {
    .c-feed--grid:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(2, minmax(0, 1fr)) 
   }
}
@media(min-width: 48em)and (max-width: 63.99em) {
    .c-feed--grid:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(3, minmax(0, 1fr)) 
   }
}
@media(min-width: 64em) {
    .c-feed--grid {
        grid-template-columns:repeat(4, minmax(0, 1fr)) 
   }
}
@media(max-width: 47.99em) {
    .c-feed--grid.c-feed--small-items:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(3, minmax(0, 1fr)) 
   }
}
@media(min-width: 48em)and (max-width: 63.99em) {
    .c-feed--grid.c-feed--small-items:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(4, minmax(0, 1fr)) 
   }
}
@media(min-width: 64em) {
    .c-feed--grid.c-feed--small-items {
        grid-template-columns:repeat(5, minmax(0, 1fr)) 
   }
}
@media(max-width: 47.99em) {
    .c-feed--grid.c-feed--large-items:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(1, minmax(0, 1fr)) 
   }
}
@media(min-width: 48em)and (max-width: 63.99em) {
    .c-feed--grid.c-feed--large-items:not(.c-feed--mobile-scroller) {
        grid-template-columns:repeat(2, minmax(0, 1fr)) 
   }
}
@media(min-width: 64em) {
    .c-feed--grid.c-feed--large-items {
        grid-template-columns:repeat(3, minmax(0, 1fr)) 
   }
}
@media(max-width: 63.99em) {
    .c-feed--mobile-scroller {
        --feed-scroller-item-size: 12rem;
        grid-template-columns:repeat(auto-fill, minmax(var(--feed-scroller-item-size), var(--feed-scroller-item-size)));
        grid-auto-columns:minmax(var(--feed-scroller-item-size), var(--feed-scroller-item-size));
        grid-auto-flow:column;
        margin:0 -1rem;
        display:grid;
        gap:1rem;
        width:calc(100% + 1rem + 1rem);
        padding:0 1rem;
        overflow-y:auto;
        overscroll-behavior-x:contain;
        -ms-scroll-snap-type:x proximity;
        scroll-snap-type:x proximity 
   }
    .c-feed--mobile-scroller.c-feed--small-items {
        --feed-scroller-item-size: 8rem 
   }
    .c-feed--mobile-scroller.c-feed--large-items {
        --feed-scroller-item-size: 15rem 
   }
    .c-feed--mobile-scroller .c-feed__item {
        scroll-snap-align:start;
        scroll-margin-inline:1rem 
   }
}
@media(max-width: 29.99em) {
    .c-feed--mobile-scroller {
        --feed-scroller-item-size: 12rem 
   }
    .c-feed--mobile-scroller.c-feed--small-items {
        --feed-scroller-item-size: 8rem 
   }
    .c-feed--mobile-scroller.c-feed--large-items {
        --feed-scroller-item-size: 15rem 
   }
}
@media(min-width: 30em)and (max-width: 39.99em) {
    .c-feed--mobile-scroller {
        --feed-scroller-item-size: 13rem 
   }
    .c-feed--mobile-scroller.c-feed--small-items {
        --feed-scroller-item-size: 10rem 
   }
    .c-feed--mobile-scroller.c-feed--large-items {
        --feed-scroller-item-size: 18rem 
   }
}
@media(min-width: 40em)and (max-width: 63.99em) {
    .c-feed--mobile-scroller {
        --feed-scroller-item-size: 15rem 
   }
    .c-feed--mobile-scroller.c-feed--small-items {
        --feed-scroller-item-size: 12rem 
   }
    .c-feed--mobile-scroller.c-feed--large-items {
        --feed-scroller-item-size: 20rem 
   }
}
@media(hover: none) {
    .c-feed--mobile-scroller::-webkit-scrollbar {
        display:none 
   }
}
.c-feed--list {
    display:grid;
    grid-template-columns:1fr;
    grid-auto-columns:1fr;
    gap:1rem 
}
@media(min-width: 48em) {
    .c-feed--list {
        gap:1.25rem 
   }
}
.c-feed--divide-list .c-feed__item:not(:last-child) {
    border-bottom:1px solid var(--content-border);
    padding-bottom:1rem 
}
@media(min-width: 48em) {
    .c-feed--divide-list .c-feed__item:not(:last-child) {
        padding-bottom:1.25rem 
   }
}
.c-feed__item {
    display:flex;
    flex-direction:column;
    outline-offset:2px;
    background:transparent;
    border:none;
    text-align:start;
    padding:0;
    margin:0 
}
.c-feed--list .c-feed__item {
    width:100%;
    flex-direction:row;
    align-items:flex-start 
}
.c-feed__link {
    text-decoration:none;
    color:inherit 
}
.c-feed__media {
    width:100%;
    aspect-ratio:4/3;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:50% 50%;
    object-position:50% 50%;
    position:relative 
}
@supports(aspect-ratio: auto) {
    .c-feed__media {
        aspect-ratio:4/3 
   }
}
@supports not (aspect-ratio: auto) {
    .c-feed__media {
        padding-top:75% 
   }
}
.c-feed__media .c-feed__img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:50% 50%;
    object-position:50% 50% 
}
.c-feed--list .c-feed__media {
    max-width:25%;
    min-width:120px 
}
@media(max-width: 47.99em) {
    .c-feed--list .c-feed__media {
        -webkit-margin-end:.5rem;
        margin-inline-end:.5rem 
   }
}
@media(min-width: 48em) {
    .c-feed--list .c-feed__media {
        -webkit-margin-end:1rem;
        margin-inline-end:1rem 
   }
}
@supports not (aspect-ratio: auto) {
    .c-feed--list .c-feed__media {
        padding-top:0;
        height:120px 
   }
}
.c-feed--grid .c-feed__media {
    margin-bottom:.5rem 
}
.c-feed__media .c-feed__link {
    transition-property:opacity;
    transition-duration:200ms;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) 
}
@media(hover: hover)and (pointer: fine) {
    .c-feed__media .c-feed__link:hover {
        opacity:.9 
   }
}
@supports(aspect-ratio: auto) {
    .c-feed--img-square .c-feed__media {
        aspect-ratio:1/1 
   }
}
@supports(aspect-ratio: auto) {
    .c-feed--img-landscape .c-feed__media {
        aspect-ratio:16/9 
   }
}
.c-feed__img-overlay {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100% 
}
.c-feed__img-overlay--play {
    width:100%;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:.25rem 
}
.c-feed__img-overlay--play .c-feed__img-overlay-icon {
    font-size:2em 
}
.c-feed__img-overlay--play .c-feed__img-overlay-icon .fa-circle {
    color:#18181b 
}
.c-feed__img-overlay--play .c-feed__img-overlay-icon .fa-play {
    color:#fff 
}
@media(hover: hover)and (pointer: fine) {
    .c-feed__img-overlay--play {
        opacity:0;
        background:rgba(0,0,0,.3);
        color:#fff;
        padding:0;
        align-items:center;
        justify-content:center;
        transition-property:opacity;
        transition-duration:200ms;
        transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) 
   }
    .c-feed__item:hover .c-feed__img-overlay--play {
        opacity:1 
   }
    .c-feed__img-overlay--play .c-feed__img-overlay-icon {
        font-size:2.5em 
   }
    .c-feed__img-overlay--play .c-feed__img-overlay-icon .fa-circle {
        color:#fff 
   }
    .c-feed__img-overlay--play .c-feed__img-overlay-icon .fa-play {
        color:#18181b 
   }
}
.c-feed__img-overlay--playing {
    display:flex;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.3);
    color:#fff;
    padding:0;
    align-items:center;
    justify-content:center;
    font-size:1.25rem 
}
@media(min-width: 48em) {
    .c-feed__img-overlay--playing {
        font-size:1.5rem 
   }
}
.c-feed__item-title {
    color:var(--content-text);
    font-size:1rem;
    line-height:1.5rem;
    font-weight:700 
}
@media(min-width: 48em) {
    .c-feed--large-items .c-feed__item-title {
        font-size:1.125rem;
        line-height:1.75rem 
   }
}
@media(min-width: 48em) {
    .c-feed--list .c-feed__item-title {
        font-size:1.125rem;
        line-height:1.75rem 
   }
}
@media(max-width: 39.99em) {
    .c-feed--grid .c-feed__item-title {
        font-size:.875rem;
        line-height:1.25rem 
   }
}
.c-feed__item-title .c-feed__link {
    color:var(--content-link) 
}
.c-feed__item-title .c-feed__link:hover {
    text-decoration:underline 
}
.c-feed__item-description {
    color:var(--content-text-secondary);
    font-size:.875rem;
    line-height:1.25rem 
}
@media(max-width: 39.99em) {
    .c-feed--grid .c-feed__item-description {
        font-size:.75rem;
        line-height:1rem 
   }
}
.c-feed--list .c-feed__item-description {
    margin-top:.125rem 
}
.c-feed__item-meta {
    font-style:italic;
    color:var(--content-text-tertiary);
    font-size:.875rem;
    line-height:1.25rem 
}
@media(max-width: 39.99em) {
    .c-feed__item-meta {
        font-size:.75rem;
        line-height:1rem 
   }
}
.c-feed--list .c-feed__item-meta {
    margin-top:.125rem 
}
.c-feed__play {
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    text-align:start;
    background:var(--content-button-bg);
    border:1px solid var(--content-button-border);
    padding:.5rem .75rem;
    border-radius:.25rem;
    margin-top:.5rem;
    transition-property:border-color;
    transition-duration:200ms;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) 
}
.c-feed__play:hover {
    border-color:var(--content-button-border-hover) 
}
.c-feed__play-icon {
    -webkit-margin-end:.5rem;
    margin-inline-end:.5rem;
    transition-property:transform;
    transition-duration:200ms;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) 
}
.c-feed__play:hover .c-feed__play-icon {
    transform:scale(1.05) 
}
.c-feed__placeholder {
    width:4em;
    height:1em;
    display:inline-block;
    border-radius:.25rem;
    background-color:var(--content-placeholder-bg) 
}
.c-feed__item-description .c-feed__placeholder {
    width:8em 
}
.c-feed__more {
    color:var(--content-link);
    font-weight:700;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:.5rem;
    border-radius:.25rem;
    transition-property:background-color;
    transition-duration:300ms;
    transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) 
}
.c-feed__more:hover {
    background:var(--content-button-bg) 
}