/*

Common breakpoints for widths of devices :
	- 320px - 480px : Mobile
	- 481px - 768px : Tablet, iPad
	- 769px - 1024px : Laptop, small screen
	- 1025px - 1200px : Desktop, large screen
	- 1201px and more : Extra large screen, TV

So let's use : 480px and 1024px !

*/

/*===== BIG screen size : desktop (ONLY !) =====*/

@media screen and (min-width : 1025px) {
	
	
	
}


/*===== MEDIUM screen size : tablet, mobile-landscape (AND below !) =====*/

@media screen and (max-width : 1024px) {
	
	/* Hero */
	.hero_header {
		--heroHeaderZoomMax : 1.25 ;
		
		width : min(100%, 450px) ;
	}
	
	.hero_title {
		font-size : 2.25em ;
		letter-spacing : 0.5px ;
	}
	
	/* Music */
	.container_videos {
		flex-direction : column ;
		
		gap : 10px 10px ;
	}
	
	music-video-item {
		width : 100% ;
		padding : 5px 10px ;
		
		display : flex ;
		flex-direction : row ;
		flex-wrap : nowrap ;
		justify-content : center ;
		align-items : flex-start ;		/* The text starts at the top of the thumbnail, whatever its length */
	}
	
	.video {
		width : 200px ;
		margin-right : 10px ;
	}
	
	.video_text {
		width : calc(100% - 200px) ;
		margin-left : 10px ;
	}
	
	.video_title,
	.video_description,
	.video_date,
	.video_tags,
	.video_statistics,
	.video_music_sheet {
		margin-left : unset ;
		margin-right : unset ;
		text-align : left ;
	}
	
	.video_title {
		margin-top : 0 ;
	}
	.video_description {
		margin-top : 10px ;
	}
	.video_date {
		margin-top : 7px ;
	}
	.video_tags {
		margin-top : 10px ;
	}
	.video_statistics {
		margin-top : 10px ;
	}
	.video_music_sheet {
		margin-top : 10px ;
	}
	
}


/*===== SMALL screen size : mobile-portrait =====*/

@media screen and (max-width : 480px) {
	
	/* Article */
	article {
		min-height : calc(75vh - var(--headerHeight)) ;
	}
	
	/* Music */
	.container_videos {
		width : 99% ;
		flex-direction : column ;
		
		gap : 30px 10px ;
	}
	
	music-video-item {
		width : 100% ;
		padding : 5px 10px 15px 10px ;
		
		display : flex ;
		flex-direction : column ;
		flex-wrap : nowrap ;
		justify-content : center ;
		align-items : center ;
	}
	
	.video {
		width : 100% ;
	}
	
	.video_text {
		width : 100% ;
	}
	
	.video_title,
	.video_description,
	.video_date,
	.video_tags,
	.video_statistics,
	.video_music_sheet {
		margin-left : auto ;
		margin-right : auto ;
		text-align : center ;
	}
	
	.video_title {
		margin-top : 10px ;
	}
	.video_tags {
		margin-top : 15px ;
	}
	.video_statistics {
		margin-top : 15px ;
	}
	.video_music_sheet {
		margin-top : 15px ;
	}
	
}

@media screen and (max-width : 480px) {
	.slider_menu {
		max-width : 100% ;
		overflow-x : auto ;
		scrollbar-width : none ;
	}
}