popsu-d9/web/themes/custom/popsu/sass/pages/_archives.scss

.path-archives{
	
	.content_container{
		&>div>h2{
			text-align: center;
		}
		.views-element-container{
			
			&>div{
				display: grid;
				grid-template-columns: 10% repeat(3, minmax(0, 1fr)) 10%;
				// grid-column-gap: 2rem;
				// grid-row-gap: 1rem;
				
				header{
					grid-column: 1 / span 5;
					text-align: center;
				}
				nav{
					grid-column: 1 / span 5;
					text-align: center;
				}	
				.views-row:first-of-type{
					grid-column: 2;
				}
				.views-row:nth-of-type(3n+1){
					grid-column: 2;
				}
				.views-row{
					
					// background: $col-met;
					a{
						text-decoration: none;
						// color: white;
					}
				}
				.views-row{
					
					// &::after{
					// 	content: "";
					// 	padding-bottom: 100%;
					// 	display: block;
					// 	grid-column: 1 / span 2;
					// }
					padding: .3rem .7rem;
					text-transform: uppercase;
					display: grid !important;
					width: 100%;
					max-height: 100%;
					grid-template-columns: repeat( 2, minmax(0, 1fr));
	
					.views-field{
						grid-column: 1 / span 2;
						color: white;
						background: black;
					}
					.views-field-field-type-evenement{
						grid-column: 1 /span 2 ;
						padding: 0.5rem 0 0 1rem;
					}
					.views-field-field-date{
						grid-column: 1 /span 2 ;
						grid-row: 3;
						padding: 0.5rem 0 0 1rem;
	
					}
					
					.views-field-field-programme{
						margin-bottom: -.3rem;
						grid-row: 1;
						font-weight: 600;
						z-index: 10;
						background: transparent !important;
						.field-content{
							background:white;
							margin: 0 0 0 1rem ;
							padding: 0 0.2rem;
							display: inline-block;
						
						}
						background: transparent;
						
					}
					.views-field-field-image{
						grid-row: 2;
						max-height: 100%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
						.field-content{
							padding-bottom: 66%;
							position: relative;
							overflow: hidden;
							a{
								height: 100%;
								position: absolute;
								overflow: hidden;
							}
						}
					}
					.views-field-title{
						font-weight: 600;
						padding: .5rem 1rem 0.5rem 1rem;
					}
					.views-field-field-sous-titre{
						padding: 0 1rem 1rem 1rem;
	
					}
					a{
						display: inline-block;
						width: auto;
						text-decoration: none;
						
						text-transform: uppercase;
					}
					
					
				}
				.programme-1{
					
					.views-field{
						background: $col-1;
					}
						.views-field-field-programme{
							color: $col-1 !important;
	
					}
					
				}
				.programme-2{
					.views-field{
						background: $col-2;
					}
						.views-field-field-programme{
							color: $col-2 !important;
						}
					
				}
				.programme-3{
					.views-field{
						background: $col-eur;
					}
						.views-field-field-programme{
							color: $col-eur !important;
						}
					
				}
				.programme-4{
					.views-field{
						background: $col-1;
					}
						.views-field-field-programme{
							color: $col-1 !important;
						}
					
					
				}
				.programme-5{
					.views-field{
						background: $col-mond;
					}
						.views-field-field-programme{
							color: $col-mond !important;
						}
					
					
				}
				.programme-6{
					.views-field{
						background: $col-ter;
					}
						.views-field-field-programme{
							color: $col-ter !important;
						}
					
					
				}
				.programme-7{
					.views-field{
						background: $col-met;
					}
						.views-field-field-programme{
							color: $col-met !important;
						}
					
					
				}
				.programme-883{
					.views-field{
						background: $col-transition;
					}
						.views-field-field-programme{
							color: $col-transition !important;
						}
					
					
				}
				.programme-878{
					.views-field{
						background: $col-exode;
					}
						.views-field-field-programme{
							color: $col-exode !important;
						}
				}
				// mise en page temporaire
				// article{
				// 	display: grid;
				// 	h2{
				// 		grid-row: 2;
				// 	}
				// 	&>div{
				// 		grid-row: 1;
				// 		display: grid;
				// 		div:nth-child(2){
				// 			grid-row: 1;
				// 		}
				// 		div:nth-child(1){
				// 			grid-row: 2;
				// 		}
				// 	}
					
				// }
			}
			
		}
	}
}