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

.path-centre-de-ressources{
	main{
		flex: 0 0 100%;
		max-width: 100%;
	}
	background-color: $bck-col;
	header{
		margin-bottom: 0;
		.slick-slide{
			margin: 0 1rem;
			.views-row{
				display: grid !important;
				grid-template-columns: 1fr;
				// flex-direction: column;
				// flex-direction: column-reverse;
				position: relative;
				height: auto;
				.views-field-field-image{
					grid-column: 1;
					grid-row: 1 / span 4;
					z-index: -1;
					padding-top: 1rem;
				}
				.views-field:not(.views-field-field-image){
					background: blue;
					width: 50%;
					margin-left: 1rem;
					padding-left: 1rem;
					
				}
				.views-field-title{
					padding-bottom: 1rem;
					grid-column: 1;
					grid-row: 3;
					font-weight: 600;
				}
				.views-field-view-node{
					padding-top: 1rem;
					grid-column: 1;
					grid-row: 1;
				}
				.views-field-field-programme{
					text-transform: uppercase;
					grid-column: 1;
					grid-row: 2;
				}
				a{
					text-decoration: none;
				}
			}
		}
		.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;
		}
		
		
	}
	.content_container{
		&>div>h2:first-child{
			text-align: center;
			background-color: $lightblue;
			padding: 1rem 0;
		}
	}
	
	form{
		background-color: $lightblue;
		display: grid;
		padding: 5rem 0 1rem 0;
		margin-top: -3rem;
		column-gap: 1rem;
		grid-template-columns: calc(10% - 3em) repeat(4, 20%);
		&>div:first-child{
			grid-column-start: 2;
		}
		.form-item-combine{
			grid-row: 1 / span 1 ;
			grid-column-start: 2;
		}
		.form-item-programme{
			
			grid-column-start: 2;
		}
		.form-item-items-per-page{
			grid-column-start: 2;
		}
		select, input{
			display: inline-block;
			width: auto;
			width: 100%;
			font-size: $font-normal;
			padding: .3rem 1rem;
			height: auto;
		}
		div{
			display: inline-block;
			width: auto;
			// padding: .5rem 1rem;
		}
		.form-actions{
			grid-column: 4 / span 2;
			display: grid;
			grid-template-columns: repeat(2,  minmax(0,1fr) );
			align-items: center;
			column-gap: 1rem;
			input{
				background-color: transparent;
				border: solid 1px black;
				box-shadow: none;
				// &:first-child{
				// 	// margin-right: .5rem;
				// }
				// &:last-child{
				// 	// margin-left: .5rem;
				// }
			}
		}
	}
	.views-view-grid{
		margin-top: 3rem;
		.views-row{
			display: grid;
			column-gap: 1rem;
			row-gap: 1rem;
			grid-template-columns:  calc(10% - 3em) repeat(3, 27.3%);
			align-items: flex-start;
			.views-col:first-child{
				grid-column-start: 2;
			}
		}
		.views-col{
			display: grid;
			grid-template-columns: 40%  60%;
			grid-auto-rows: min-content;
			
			a{
				text-decoration: none;	
				&:hover{
					text-decoration: underline;
				}
			}
			background-color: rgb(255, 255, 255);
			// background-clip: content-box;
			width: 100% !important;
			padding: .3rem;
			.views-field:not(:first-child){
				padding: 0 0 0 .4rem;
			}
			.views-field-field-image{
				grid-row: 3 / span 2;
				margin-top: -1.5rem;				
			}

			
			.views-field-field-programme{
				grid-row: 1 / span 1;
				grid-column: 1 / span 2;
				.field-content{
					font-weight: 600;
					display: inline-block;
					width: auto;
					color: white;
					padding: .15rem .3rem;
					margin-bottom: 1rem;
				}
				
			}
			.views-field-field-theme{
				.field-content{
					color:black;
				}
			}
			.views-field-field-type-de-ressource{
				text-transform: uppercase;
				font-weight: 600;
				margin-bottom: .5rem;
				font-size: $font-small;

				grid-row: 2 / span 1;
				grid-column: 2 / span 1;
			}
			.views-field-title{
				font-style: italic;
				grid-row: 3 / span 1;
				grid-column: 2 / span 1;
				
			}
			.views-field-field-sous-titre{
				margin-bottom: 1rem;
				grid-row: 4 / span 1;
				grid-column: 2 / span 1;
				align-self: baseline;
			}
			.views-field-field-theme{
				grid-row: 5 / span 1;
				grid-column: 1 / span 2;
				font-size: $font-small;
			}
		}

		

	}
	
	.js-pager__items{
		text-align: center;
	}
}