| 
									
										
										
										
											2025-03-26 16:59:39 +01:00
										 |  |  | /* | 
					
						
							|  |  |  | 	GoToSocial | 
					
						
							|  |  |  | 	Copyright (C) GoToSocial Authors admin@gotosocial.org | 
					
						
							|  |  |  | 	SPDX-License-Identifier: AGPL-3.0-or-later | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	This program is free software: you can redistribute it and/or modify | 
					
						
							|  |  |  | 	it under the terms of the GNU Affero General Public License as published by | 
					
						
							|  |  |  | 	the Free Software Foundation, either version 3 of the License, or | 
					
						
							|  |  |  | 	(at your option) any later version. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	This program is distributed in the hope that it will be useful, | 
					
						
							|  |  |  | 	but WITHOUT ANY WARRANTY; without even the implied warranty of | 
					
						
							|  |  |  | 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | 
					
						
							|  |  |  | 	GNU Affero General Public License for more details. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	You should have received a copy of the GNU Affero General Public License | 
					
						
							|  |  |  | 	along with this program.  If not, see <http://www.gnu.org/licenses/>. | 
					
						
							|  |  |  | */ | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | @import "./_media-wrapper.css"; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | .media { | 
					
						
							|  |  |  | 	grid-column: span 3; | 
					
						
							|  |  |  | 	display: grid; | 
					
						
							|  |  |  | 	grid-template-columns: 50% 50%; | 
					
						
							|  |  |  | 	grid-auto-rows: 10rem; | 
					
						
							|  |  |  | 	overflow: hidden; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	&.single .media-wrapper { | 
					
						
							|  |  |  | 		grid-column: span 2; | 
					
						
							|  |  |  | 	} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	&.odd .media-wrapper:first-child, | 
					
						
							|  |  |  | 	&.double .media-wrapper { | 
					
						
							|  |  |  | 		grid-row: span 2; | 
					
						
							|  |  |  | 	} | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2025-03-31 15:51:17 +02:00
										 |  |  | 	/* | 
					
						
							|  |  |  | 		On really skinny screens allow | 
					
						
							|  |  |  | 		media wrapper to take up full | 
					
						
							|  |  |  | 		width instead of showing 2 columns. | 
					
						
							|  |  |  | 	*/ | 
					
						
							|  |  |  | 	@media screen and (max-width: 23rem) { | 
					
						
							| 
									
										
										
										
											2025-03-26 16:59:39 +01:00
										 |  |  | 		.media-wrapper { | 
					
						
							|  |  |  | 			grid-column: span 2; | 
					
						
							|  |  |  | 			grid-row: span 2; | 
					
						
							|  |  |  | 		} | 
					
						
							|  |  |  | 	} | 
					
						
							|  |  |  | } |