.streaming-section{position: relative;background: linear-gradient( 220deg, rgb(41 28 65 / 95%) 0%, rgba(65, 88, 136, 0.95) 50%, rgba(92, 125, 185, 0.95) 100% );min-height: 87dvh;padding: 9rem 7rem 3.5rem 7rem} .streaming-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at 20% 20%, rgba(103, 178, 223, 0.1) 0%, transparent 50% ), radial-gradient( circle at 80% 80%, rgba(188, 143, 243, 0.1) 0%, transparent 50% );pointer-events: none} .streaming-content{margin: 0 auto} .streaming-section h2{font-size: clamp(2rem, 4vw, 3rem);margin-bottom: 3rem;color: var(--color-light);font-weight: 500;position: relative;display: inline-block;letter-spacing: 0.05em} .streaming-section h2::after{content: "";position: absolute;width: 100%;height: 2px;bottom: -0.5rem;left: 0;background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%)} .streaming-grid{width: 100%;margin: 0.7rem auto} .audio-section{display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 5rem;row-gap: 6rem;width: 100%} .streaming-item{background: linear-gradient( 135deg, rgba(28, 35, 65, 0.7) 0%, rgba(45, 55, 90, 0.8) 50%, rgba(55, 65, 110, 0.7) 100% );backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);padding: 1.5rem;border-radius: 1.2rem;border: 1px solid rgba(173, 216, 230, 0.15);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);position: relative;overflow: hidden} .streaming-item::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at top right, rgba(173, 216, 230, 0.15), transparent 60% ), radial-gradient( circle at bottom left, rgba(188, 143, 243, 0.1), transparent 60% );pointer-events: none} .streaming-item:hover{background: linear-gradient( 135deg, rgba(35, 45, 80, 0.8) 0%, rgba(55, 65, 100, 0.9) 50%, rgba(65, 75, 120, 0.8) 100% );transform: translateY(-8px) scale(1.02);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25), 0 8px 15px rgba(0, 0, 0, 0.15), 0 0 20px rgba(173, 216, 230, 0.1);border: 1px solid rgba(173, 216, 230, 0.25)} .streaming-item iframe{width: 100% !important;height: 160px !important;border-radius: 0.8rem;margin-bottom: 0;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);border: 2px solid rgba(173, 216, 230, 0.1);transition: all 0.4s ease} .streaming-item:hover iframe{transform: scale(1.02);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2)} @media (max-width: 1105px){.streaming-section{padding: 9rem 5rem 3.5rem 7rem} } @media (max-width: 1024px){.streaming-section{padding: 2.2rem 2rem 2rem 2rem} .streaming-section h2{text-align: center;margin-left: auto;margin-right: auto;display: block;width: 100%;margin-top: 1rem} .streaming-section .streaming-content{padding: 0} .streaming-grid{padding: 0} .streaming-section h2::after{left: 50%;transform: translateX(-50%);width: 19rem} .streaming-content{padding: 0 1rem} .audio-section{grid-template-columns: 1fr} .streaming-item:hover{background: linear-gradient( 135deg, rgba(28, 35, 65, 0.7) 0%, rgba(45, 55, 90, 0.8) 50%, rgba(55, 65, 110, 0.7) 100% );transform: none;box-shadow: 0 0px 0px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.15), 0 0 0px rgba(173, 216, 230, 0.1);border: 1px solid rgba(173, 216, 230, 0.15)} .audio-section{row-gap: 3rem} } @media (max-width: 768px){.section-title{font-size: 1.75rem} .streaming-section h2::after{width: 16rem} .streaming-section{padding: 2.7rem 2rem 2rem 2rem} } @media (max-width: 648px){.streaming-content{padding: 0rem} .streaming-grid{padding: 0rem} .streaming-section{padding: 6rem 1rem} } @media (max-width: 468px){.streaming-section{padding: 3.6rem 2rem 2rem 2rem} } @media (max-width: 368px){.streaming-section{padding: 3.6rem 1rem 2rem 1rem} }