.media-section{--media-card-width: 164px;--media-gap: 16px;position:relative;overflow:hidden;border-block:1px solid var(--color-primary-100)}.media-section__collection{position:relative}.media-section__body{display:flex;flex-direction:column;gap:24px}.media-section__viewport{display:flex;flex-direction:column;gap:var(--media-gap);overflow:hidden;padding-block:10px;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}.media-section__track{display:flex;width:max-content;animation:media-section-scroll calc(var(--media-count) * 8s) linear infinite}.media-section__track--reverse{animation-direction:reverse}.media-section__group{display:flex;flex-shrink:0;gap:var(--media-gap);margin:0;padding:0 var(--media-gap) 0 0;list-style:none}.media-section__card{display:flex;flex:0 0 var(--media-card-width);flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:120px;padding:18px 16px 14px;border:1px solid var(--color-primary-100);border-radius:var(--radius-2xl, 1rem);background:#fff;box-shadow:0 3px 14px -7px #1e40af1f;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.media-section__card:hover{transform:translateY(-4px);border-color:var(--color-primary-300);box-shadow:var(--shadow-soft)}.media-section__logo{display:block;width:100%;height:64px;object-fit:contain}.media-section__name{width:100%;overflow:hidden;color:var(--color-gray-600, #4b5563);font-size:11px;line-height:1.5;text-align:center;text-overflow:ellipsis;white-space:nowrap}.media-section:has(:focus-visible) .media-section__track,.media-section__collection[data-paused=true] .media-section__track{animation-play-state:paused}@media(hover:hover)and (pointer:fine){.media-section:hover .media-section__track{animation-play-state:paused}}.media-section__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--media-gap);margin:0;padding:10px 0;list-style:none}.media-section__grid .media-section__card{flex-basis:auto}.media-section__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;order:1}.media-section__controls--expanded{order:-1}.media-section__button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border:1px solid var(--color-primary-200);border-radius:var(--radius-xl, .75rem);background:#fff;color:var(--color-primary-700);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.media-section__button:hover{border-color:var(--color-primary-300);background:var(--color-primary-50)}.media-section__button:focus-visible{outline:2px solid var(--color-primary-600);outline-offset:4px}.media-section__button--playback{border-color:transparent;background:transparent;color:var(--color-gray-600, #4b5563);font-weight:500}.media-section__button svg{flex-shrink:0}.media-section__chevron{transition:transform .2s ease}.media-section__chevron--up{transform:rotate(180deg)}@keyframes media-section-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@media(max-width:1023px){.media-section__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:639px){.media-section{--media-card-width: 140px;--media-gap: 12px}.media-section__track{animation-duration:calc(var(--media-count) * 7s)}.media-section__card{min-height:108px;padding:14px 12px 12px;gap:10px}.media-section__logo{height:56px}.media-section__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-section__button{width:100%;font-size:13px;padding-inline:14px}.media-section__controls{flex-direction:column;gap:8px;width:min(200px,calc(100vw - 176px));margin-inline:auto}}@media(prefers-reduced-motion:reduce){.media-section__track,.media-section__card,.media-section__button,.media-section__chevron{animation:none;transition:none}.media-section__card:hover{transform:none}.media-section__heading{opacity:1!important;transform:none!important}}
