.song-order { display: grid; grid-template-columns: .9fr 1.05fr .7fr; gap: 30px; align-items: center; max-width: none; padding-top: 105px; padding-bottom: 110px; background: linear-gradient(135deg, #fffdf8 0%, #f2f6ff 100%); position: relative; overflow: hidden; }.song-order:before { content: '♪'; position: absolute; right: 3%; top: -28px; color: rgba(236,58,136,.08); font: 220px/1 Georgia,serif; transform: rotate(18deg); }.song-order-copy, .song-order-panel, .song-order-use { position: relative; z-index: 1; }.song-order-copy h2 { font-family: var(--display); font-size: clamp(47px, 5.4vw, 74px); line-height: .9; letter-spacing: -.09em; margin: 20px 0 23px; }.song-lead { max-width: 410px; color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 27px; }.song-order-actions { display: grid; gap: 14px; justify-items: start; }.song-note { color: var(--pink); font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: -.03em; }.song-order-panel { color: white; background: var(--blue-deep); border-radius: 15px; padding: 28px 29px 27px; box-shadow: 14px 17px 0 var(--yellow); transform: rotate(-1deg); }.song-panel-head { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .12em; font-weight: 700; }.song-order-panel h3 { font-family: var(--display); font-size: 31px; line-height: .95; letter-spacing: -.07em; margin: 25px 0 21px; }.song-order-panel h3 strong { color: var(--yellow); }.genre-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.genre-grid span { padding: 10px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; color: rgba(255,255,255,.85); font-size: 10px; }.genre-grid span:nth-child(3n) { border-color: rgba(236,58,136,.7); }.genre-grid span:nth-child(3n+1) { color: var(--yellow); }.vocal-choice { border-top: 1px solid rgba(255,255,255,.18); margin-top: 20px; padding-top: 16px; }.vocal-label { display: block; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .1em; font-weight: 700; margin-bottom: 12px; }.vocal-choice > div { display: flex; gap: 8px; }.vocal-choice b { flex: 1; background: var(--pink); border-radius: 7px; padding: 10px 8px; text-align: center; font-size: 10px; }.vocal-choice b:last-child { background: var(--blue-bright); }.song-order-use { background: var(--yellow); color: var(--ink); padding: 27px 23px 24px; border-radius: 11px; transform: rotate(2.5deg); }.song-use-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: white; font-size: 20px; }.song-order-use h3 { font-family: var(--display); font-size: 24px; line-height: .98; letter-spacing: -.07em; margin: 19px 0 18px; }.song-order-use h3 strong { color: var(--blue); }.song-order-use ul { list-style: none; padding: 0; margin: 0 0 19px; display: grid; gap: 9px; }.song-order-use li { font-size: 11px; line-height: 1.35; }.song-order-use li::first-letter { color: var(--pink); }.song-order-use p { margin: 0; padding-top: 15px; border-top: 1px solid rgba(7,19,47,.18); color: #6c5d2d; font-size: 11px; line-height: 1.55; }
@media (max-width: 900px) { .song-order { grid-template-columns: 1fr 1fr; gap: 39px; }.song-order-copy { grid-column: 1 / -1; }.song-order-use { align-self: stretch; } }
@media (max-width: 650px) { .song-order { grid-template-columns: 1fr; gap: 38px; padding-top: 80px; padding-bottom: 88px; }.song-order-copy { grid-column: auto; }.song-order-copy h2 { font-size: 52px; }.song-order-panel { width: 96%; margin: 0 auto; }.song-order-use { width: 92%; margin: 0 auto; }.vocal-choice > div { flex-direction: column; } }