/* ==========================================================
   HASHVIX RESPONSIVE SYSTEM
========================================================== */


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media(max-width:1400px){

.hx-container{

width:min(95%,1280px);

}

.hx-dashboard-top{

grid-template-columns:repeat(2,1fr);

}

}


/* ==========================================================
   DESKTOP
========================================================== */

@media(max-width:1200px){

.hx-grid-4{

grid-template-columns:repeat(2,1fr);

}

.hx-grid-3{

grid-template-columns:repeat(2,1fr);

}

.hx-featured-card{

grid-template-columns:1fr;

}

.hx-dashboard-grid{

grid-template-columns:1fr;

}

.hx-player-left,

.hx-player-right{

width:auto;

}

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:992px){

.hx-container{

width:94%;

}

.hx-grid-4,

.hx-grid-3,

.hx-grid-2{

grid-template-columns:1fr;

}

.hx-flex-tablet{

flex-direction:column;

}

.hx-dashboard-header{

flex-direction:column;

align-items:flex-start;

}

.hx-artist-card{

flex-direction:column;

text-align:center;

}

.hx-artist-name{

justify-content:center;

}

.hx-player{

left:12px;

right:12px;

bottom:12px;

}

.hx-player-right{

display:none;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

body{

font-size:15px;

}

h1{

font-size:34px;

}

h2{

font-size:28px;

}

h3{

font-size:24px;

}

.hx-container{

width:94%;

}

.hx-section{

padding:50px 0;

}

.hx-card{

border-radius:22px;

}

.hx-btn{

width:100%;

justify-content:center;

}

.hx-btn-group{

flex-direction:column;

}

.hx-input-row{

grid-template-columns:1fr;

}

.hx-track-grid,

.hx-explore-grid,

.hx-new-grid,

.hx-ai-picks{

grid-template-columns:1fr;

}

.hx-artist-stats{

grid-template-columns:repeat(2,1fr);

}

.hx-profile-tabs{

overflow-x:auto;

white-space:nowrap;

padding-bottom:12px;

scrollbar-width:none;

}

.hx-profile-tabs::-webkit-scrollbar{

display:none;

}

.hx-player{

height:82px;

padding:0 16px;

}

.hx-player-cover{

width:54px;

height:54px;

}

.hx-player-controls{

gap:12px;

}

.hx-player-btn{

width:38px;

height:38px;

}

.hx-player-play{

width:50px;

height:50px;

}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:576px){

.hx-artist-stats{

grid-template-columns:1fr;

}

.hx-socials{

justify-content:center;

}

.hx-follow-bar{

flex-direction:column;

}

.hx-featured{

padding:24px;

}

.hx-dashboard-top{

grid-template-columns:1fr;

}

.hx-overview{

padding:22px;

}

.hx-credit-value{

font-size:40px;

}

.hx-player-right{

display:none;

}

.hx-player-title{

font-size:14px;

}

.hx-player-artist{

font-size:12px;

}

.hx-time{

display:none;

}

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media(max-width:420px){

.hx-container{

width:96%;

}

.hx-player{

left:8px;

right:8px;

bottom:8px;

border-radius:18px;

}

.hx-player-cover{

width:46px;

height:46px;

}

.hx-player-play{

width:46px;

height:46px;

font-size:18px;

}

.hx-player-btn{

width:34px;

height:34px;

font-size:15px;

}

.hx-player-center{

padding:0 8px;

}

}


/* ==========================================================
   LANDSCAPE PHONE
========================================================== */

@media(max-height:520px){

.hx-player{

height:70px;

}

.hx-artist-hero{

height:220px;

}

}


/* ==========================================================
   HOVER DEVICES
========================================================== */

@media(hover:hover){

.hx-card:hover{

transform:translateY(-8px);

}

.hx-btn:hover{

transform:translateY(-3px);

}

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media(hover:none){

.hx-card:hover{

transform:none;

}

.hx-btn:hover{

transform:none;

}

.hx-player-btn:hover{

background:transparent;

}

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

.hx-player,

header,

footer,

.sidebar,

.scroll-top{

display:none!important;

}

body{

background:white!important;

color:black!important;

}

}