/*=============================================
Desktop (1400px)
=============================================*/

@media(max-width:1400px){

.hero h1{

font-size:130px;

}

.album-box{

grid-template-columns:380px 1fr;

}

}



/*=============================================
Laptop
=============================================*/

@media(max-width:1200px){

.container{

width:94%;

}

.hero h1{

font-size:110px;

}

.page-hero h1{

font-size:72px;

}

.album-box{

grid-template-columns:1fr;

text-align:center;

}

.album-cover{

max-width:450px;

margin:auto;

}

.album-buttons{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

}

.about-image{

max-width:500px;

margin:auto;

}

.products-grid,

.songs-grid,

.video-grid{

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

}

.gallery-grid{

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

}

.platforms{

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

}

.social-grid{

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

}

.contact-grid{

grid-template-columns:1fr;

}

}



/*=============================================
Tablet
=============================================*/

@media(max-width:992px){

.navbar .container{

height:80px;

}

nav{

gap:20px;

}

.hero{

height:90vh;

}

.hero h1{

font-size:90px;

}

.hero p{

font-size:18px;

}

.page-hero{

padding-top:150px;

padding-bottom:90px;

}

.page-hero h1{

font-size:60px;

}

section{

padding:80px 0;

}

h2{

font-size:46px;

}

.quote-section h2{

font-size:44px;

}

.stats{

grid-template-columns:1fr;

}

.gallery-grid{

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

}

.footer-social{

flex-wrap:wrap;

}

}



/*=============================================
Large Mobile
=============================================*/

@media(max-width:768px){

.logo{

font-size:34px;

}

.navbar{

position:relative;

}

.navbar .container{

flex-direction:column;

justify-content:center;

height:auto;

padding:20px 0;

}

nav{

margin-top:20px;

flex-wrap:wrap;

justify-content:center;

gap:15px;

}

.hero{

height:auto;

padding:120px 0;

}

.hero h1{

font-size:72px;

letter-spacing:4px;

}

.hero p{

font-size:16px;

padding:0 15px;

}

.buttons{

flex-direction:column;

align-items:center;

}

.btn{

width:260px;

}

.page-hero h1{

font-size:54px;

}

.page-hero p{

font-size:16px;

}

.products-grid,

.video-grid,

.songs-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.platforms{

grid-template-columns:1fr;

}

.social-grid{

grid-template-columns:1fr;

}

.newsletter-section form{

flex-direction:column;

align-items:center;

}

.newsletter-section input{

width:100%;

max-width:500px;

}

.error-content h1{

font-size:150px;

}

.error-content h2{

font-size:42px;

}

}



/*=============================================
Mobile
=============================================*/

@media(max-width:576px){

.hero h1{

font-size:56px;

}

.page-hero h1{

font-size:44px;

}

h2{

font-size:38px;

}

.album-details h2{

font-size:52px;

}

.hero p,

.page-hero p,

.about-content p,

.album-details p{

font-size:15px;

}

.song-card img,

.product-card img{

height:260px;

}

.video-thumbnail img{

height:220px;

}

.gallery-item img{

height:260px;

}

.contact-form{

padding:25px;

}

.footer-social a{

width:48px;

height:48px;

font-size:18px;

}

.error-content h1{

font-size:110px;

}

.error-content h2{

font-size:34px;

}

}



/*=============================================
Small Mobile
=============================================*/

@media(max-width:390px){

.hero h1{

font-size:46px;

}

.page-hero h1{

font-size:36px;

}

.logo{

font-size:30px;

}

.btn{

width:100%;

}

nav{

gap:10px;

}

nav a{

font-size:12px;

}

.container{

width:95%;

}

}



/*=============================================
Landscape Phones
=============================================*/

@media(max-height:600px){

.hero{

height:auto;

padding:120px 0;

}

}