/*

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) {
	
}


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

@media screen and (max-width : 480px) {
	
	.dialog_main {
		display : flex ;
	}
	
	.research_article_dialog_title {
		max-height : 90px ;
	}
	
	.research_article_dialog_preview {
		margin : 10px 0 ;
	}
	
	.research_article_dialog_preview_image {
		width : auto ;
		max-width : 200% ;
	}
	
}

@media screen and (max-width : 480px) {
	.model_container {
		width : min(500px, 86vw) ;
		height : min(500px, 86vw) ;
	}
	
	/* The Radex screenshot keeps its natural size on desktop (width : unset) :
	   on phones it fills its plate */
	.radex .article_preview > img {
		width : 100% ;
		height : 100% ;
		object-fit : cover ;
		object-position : top ;
	}
	
	/* Fixed pixel artwork : scaled with layout */
	.research_book {
		zoom : 0.72 ;
	}
}

@media screen and (max-width : 480px) {
	/* The 2.5em lettering was wider than the phone plate : the centered inline
	   text overflowed the white frame on both sides */
	.radiology .hero_title {
		font-size : 2em ;
	}
}