.collection .container {
    margin: 30px auto;
    max-width: 1800px;
}

.intro {
    height: 60vh;
    background-image: url(../../assets/image/luxury-fragrance.jpg);
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
}
.intro .container{max-width: 1440px;}
.intro h1 {
   font-size: 40px;
    margin-top: 30vh;
    line-height: 52px; color: #fff;
}



/*Responsive Devices*/




/*syt*/
@media only screen and (min-width : 1920px) and (max-width : 2559px){}

/*syt*/
@media only screen and (min-width : 1600px) and (max-width : 1919px){
    .intro .container {max-width: 1400px;}
    }

/*syt*/
@media only screen and (min-width : 1440px) and (max-width : 1599px){
    .intro .container {max-width: 1400px;}
    .collection{padding-top: 50px;}

}

/*syt*/
@media only screen and (min-width : 1366px) and (max-width : 1439px){
    .intro .container {max-width: 1200px;}
    .collection{padding-top: 50px;}
}

/*syt*/
@media only screen and (min-width : 1200px) and (max-width : 1365px){
    
.intro .container {max-width: 1100px;}
.collection{padding-top: 50px;}

}


/*Tab-syt*/
@media only screen and (min-width : 1024px) and (max-width : 1199px){

.intro .container {max-width: 960px;}
.collection{padding-top: 50px;}
}


/*Tab*/
@media only screen and (min-width : 768px) and (max-width : 1023px){
    .intro .container {max-width: 95%;}

.collection{padding-top: 50px;}
.intro{background-size: contain; height: 47vh;}
.intro h1{margin-top: 20vh;}
    
}


/*Mob*/
@media only screen and (min-width : 150px) and (max-width : 767px){
    .intro .container {max-width: 90%;}
    .intro h1 {font-size: 30px; margin-top: 20vh; line-height: 44px;}
    .collection{padding-top: 30px; padding: 30px;}
    .collection .container h3{font-size: 18px;}
}


@media only screen and (max-width: 375px) {
    .intro h1 {font-size: 26px; margin-top: 21vh; line-height: 37px;}

}

@media only screen and (max-width: 320px) {
    .intro h1 {font-size: 26px; margin-top: 21vh; line-height: 37px;}

}