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;
					}
				}
				article{
					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{
					article{
						
						background: $col-1 !important;
						.field_programme{
							color: $col-1;
						}
					}
					
				}
				.programme-2{
					article{
						background: $col-2 !important;
						.field_programme{
							color: $col-2;
						}
					}
				}
				.programme-3{
					article{
						background: $col-eur !important;
						.field_programme{
							color: $col-eur;
						}
					}
				}
				.programme-4{
					article{
						background: black;
						.field_programme{
							color: black;
						}
					}
					
				}
				.programme-5{
					article{
						background: $col-mond !important;
						.field_programme{
							color: $col-mond;
						}
					}
					
				}
				.programme-6{
					article{
						background: $col-ter !important;
						.field_programme{
							color: $col-ter;
						}
					}
					
				}
				.programme-7{
					article{
						background: $col-met !important;
						.field_programme{
							color: $col-met;
						}
					}
					
				}
				.slick-slide{
					margin: 0 1rem;
					padding: 0;
				}
				article{
					// 
					&>div{
						overflow: hidden;
						display: grid;
						grid-column: 1 / span 2;

						.field_programme{
							grid-row: 1;
							z-index: 10;
						}
						
						.field_sous_titre{
							grid-row: 3;
							margin: .5rem 1rem !important;
						}
					}
					color:white;
					h2{
						color: white;
						margin: 0 1rem 1rem 1rem;
					}
					.field_programme{
						display: block;
						a{
							background: white;
							display: inline-block;
							width: auto;
							text-decoration: none;
							font-weight: 600;
							text-transform: uppercase;
							padding: .3rem .3rem 0 .3rem;
						}
					}
				}
			}
			#actus_blocks-block_1{
				.slick-slide{
					margin: 0 1rem;
					padding: 0;
				}

				.slick-slide{
					// background: white;
				}
				.programme-1{
					article, h2{
						
						color: $col-1 !important;
					}
					.field_programme{
						a{
							background: $col-1;
						}
					}
					
				}
				.programme-2{
					article, h2{
						color: $col-2 !important;
					}
					.field_programme{
						a{
							background: $col-2;
						}
					}
				}
				.programme-3{
					article, h2{
						color: $col-eur !important;
					}
					.field_programme{
						a{
							background: $col-eur;
						}
					}
				}
				.programme-4{
					article, h2{
						color: black;
					}
					.field_programme{
						a{
							background: black;
						}
			
					}
					
				}
				
				.programme-5{
					article, h2{
						color: $col-mond !important;
					}
					.field_programme{
						a{
							background: $col-mond;
						}
					}
					
				}
				.programme-6{
					article, h2{
						color: $col-ter !important;
					}
					.field_programme{
						a{
							background: $col-ter;
						}
					}
					
				}
				.programme-7{
					article, h2{
						color: $col-met !important;
					}
					.field_programme{
						a{
						background: $col-met;
						}
					}
					
				}
				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{
				article{
					width: 100%;
					height: 100%;
					position: absolute;
				}
				.views-row{
					padding-bottom: 100%;
					position: relative;
				}	
				.links.inline{
					display: none;
				}

				.views-row article{
					display: grid;
					grid-template-columns: repeat( 2, minmax(0, 1fr));
					grid-template-rows: 60% 40%;
					
					// position: relative;
					// height: auto;
					.field_programme{
						margin: 0 0 0 1rem ;
						display: inline-block;
					}
					.field_image{
						/* grid-row: 2; */
						grid-row: 2;
						margin-top: -.5rem;
						max-height: 100%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					
					h2{
						grid-row: 2;
						grid-column: 1 / span 2;
					}
					div:first{
						grid-row: 1;
						grid-column: 1 / span 2;
						
					}
				}
			}
			#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;
		}
		
		
	}

}