.banner-section, .list-section, .play-section{ width: auto; height: auto; } /*List section*/ .banner-section, .list-section{ padding-left: 0; padding-right: 0; } .list-section h2{ font-weight: 500; } .list-section h2:before{ font-family: 'Font Awesome 7 Free'; font-weight: 900; display: block; font-size: 25px; } .list-section h2.home:before{ content: "\f015"; } .list-section h2.music:before{ content: "\f001"; } .list-section h2.record:before{ content: "\f130"; } .list-section h2.premium:before{ content: "\f3a5"; } .list-section h2.favourite:before{ content: "\f004"; } .list-section h2.recent:before{ content: "\f1da"; } .list-section h2:after { content: ''; height: 1px; width: 50px; bottom: 0; border: 1px solid #fff; display: block; margin: 15px auto; } .outer-banner .list-box .list-section h2:hover { background: linear-gradient(130deg,rgb(255,73,141) 5%,rgb(254,124,87) 99%); } /*Banner section*/ .outer-banner .wp-block-columns { gap: 0; } .outer-banner .banner-section img { height: 600px; } .banner-section .baner-btn a.wp-block-button__link{ border-radius: 30px !important; } .banner-section .baner-btn a.wp-block-button__link:hover{ background: #1b2039 !important; } /*Player section*/ .play-section, .play-section span{ background: linear-gradient(90deg, #ff498d -60%, #1b2039 65%, #ff498d 140%); } .play-section span{ background-color: transparent !important; } .play-section h3, .play-section p{ color: #fff !important; } .audio-img img{ width: 100% !important; height: 100% !important; } /*Media*/ @media screen and (min-width: 320px) and (max-width: 425px){ .play-section .inner-play { gap: 0; } .play-section h3, .play-section p { text-align: center; } .wp-block-audio { display: flex; justify-content: center; } .banner-section h1, .banner-section p{ text-align: center; } .banner-section .wp-block-buttons{ justify-content: center !important; } } @media screen and (min-width: 600px) and (max-width: 781px){ .outer-banner .wp-block-column.list-box:first-child{ flex-basis: 15% !important; } .outer-banner .wp-block-column.box-baner:nth-child(2) { flex-basis: 85% !important; } .banner-section .wp-block-column{ margin-left: 60px !important; } .alignfull .inner-play img { width: auto; } .play-section .inner-play { flex-wrap: nowrap !important; } .play-section .inner-play .audio-img { flex-basis: 20% !important; } .play-section .inner-play .audio-content { flex-basis: 80% !important; } } @media screen and (min-width: 426px) and (max-width: 769px) { .play-section .inner-play .wp-block-column figure{ flex-basis: 25% !important; } }