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

.path-actus{
	.content_container{
		&>div>h2:first-of-type{
			text-align: center;
		}
		.layout__region--content{
			
			.views-element-container{
				display: grid;
				grid-template-columns: 10% minmax(0, 1fr);
				h2{
					grid-column: 2 ;
					padding: 0 0 0 20px;
				}
				div{
					grid-column: 2;
					h2{
						margin : 1rem 0;
					}
				}
				.views-row{
					h2{
						// color: white;
						padding: 0;
						a{
							text-decoration: none;
							&:hover{
								text-decoration: underline;
							}
						}
					}
					
				}
				
				footer{
					text-align: center;
					margin: 1.8rem 0;
					grid-column: 1 / span 2 ;
					background: transparent;
					a{
						display: inline-block;
						margin: 0 auto;
						background: black;
						color: white;
						font-family: "trueno";
						font-weight: 500;
						padding: .3rem .7rem;
						font-size: $font-small;
						text-decoration: none;
						text-transform: uppercase;

						&:hover{
							color:black;
							background: white;
						}
					}
					
				}
			}
			#actus_blocks-block_2{
				.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;
						}
					
					
				}
				.slick-slide{
					margin: 0 1rem;
					padding: 0;
				}
				.views-row{
					overflow: hidden;

				}
			}
			#actus_blocks-block_1{
				.slick-slide{
					margin: 0 1rem;
					padding: 0;
					
				}

				.programme-1{

						color: $col-1 !important;
					
					.views-field-field-programme{
						
						background: $col-1;
						
					}
					
				}
				.programme-2{
					
					color: $col-2 !important;
					
					.views-field-field-programme{
						
						background: $col-2;
						
					}
				}
				.programme-3{
					
					color: $col-eur !important;
					
					.views-field-field-programme{
						
						background: $col-eur;
						
					}
				}
				.programme-4{

					color: $col-1;

					.views-field-field-programme{
						
						background: $col-1;
					
			
					}
					
				}
				
				.programme-5{

					color: $col-mond !important;

					.views-field-field-programme{
						background: $col-mond;
						
					}
					
				}
				.programme-6{

					color: $col-ter !important;
					
					.views-field-field-programme{
						
						background: $col-ter;
						
					}
					
				}
				.programme-7{

					color: $col-met !important;
					
					.views-field-field-programme{
						
						background: $col-met;
					
					}
					
				}
				.views-field{
					background: white;
				}
				// article{
				// 	// 
				// 	background: white;
				// 	&>div:first-of-type{
				// 		display: grid;
				// 		grid-column: 1 / span 2;
				// 		overflow: hidden;
				// 		div:not(.field_image){
				// 			// margin: 0 1rem;
				// 		}
				// 		.field_programme{
				// 			grid-row: 1;
				// 			z-index: 10;
				// 		}

				// 		.field_dates_actu{
				// 			grid-row: 3;
				// 			margin: .5rem 1rem;
				// 		}
				// 		.field_sous_titre{
				// 			grid-row: 4;
				// 			margin: 0rem 1rem;
				// 		}
				// 	}
				// 	// color:white;
				// 	h2{
				// 		// color: white;
				// 		margin: 0 1rem 1rem 1rem;
				// 		margin: .5rem 1rem !important;
				// 	}
				// 	.field_programme{
				// 		display: block;
				// 		a{
				// 			color: white;
				// 			display: inline-block;
				// 			width: auto;
				// 			text-decoration: none;
				// 			font-weight: 600;
				// 			text-transform: uppercase;
				// 			padding: .3rem .3rem 0 .3rem;
				// 		}
				// 	}
				// }
			}
			#actus_blocks-block_1, #actus_blocks-block_2{

				.slick-slide > div{
					padding-bottom: 100%;
					position: relative;
				}	
				.links.inline{
					display: none;
				}

				.views-row{
					text-transform: uppercase;
					display: grid !important;
					width: 100%;
					height: 100%;
					position: absolute;
					grid-template-columns: repeat( 2, minmax(0, 1fr));

					.views-field{
						grid-column: 1 / span 2;
						
					}
					.views-field-field-type-evenement{
						grid-column: 2 ;
						grid-row: 3;
						padding: 0.5rem  1rem 0 0 ;
					}
					.views-field-field-date{
						grid-column: 1;
						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;
						}
					}
					.views-field-title{
						font-weight: 600;
						padding: 0 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;
					}
					

				}
			}
			#home_blocks-block_3{
				.views-field-field-image{
					grid-column: 1;
				}
				.slick-slide{
					background-color:transparent;
					padding: 0;
					.views-row{
						padding: 0.4rem;
					}
				}
			}
			

		}

		//carroussel 
	
		
		.slick-arrow{
			position: absolute;
			height: 100%;
			cursor: pointer;
			z-index: 100;
			// background-color: white;
			opacity: 0.2;
			transition: opacity 250ms;
			width: 10%;
			&:hover{
				opacity: .5;
			}
		}
		.slick-next{
			right: 0;
			top: 0;
		}
		
		
	}

}