#livrets{
	.grid-livrets{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-template-rows: 1fr;
		gap: 20px;
	}
	a{		
		color: white !important;
		text-decoration: none !important;
	}
	.livret{
		aspect-ratio: 1;
		box-sizing: border-box;
		padding: 10px;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20px;

		position: relative;
		overflow: hidden;
		*{
			z-index: 1;
		}
		img{
			height: 50%;
			max-height: 60px;
		}
		p{
			margin: 0;
			font-size: 1.2em;
			font-variation-settings: "ital" 0, "wdth" 90, "wght" 700;
			text-align: center;
		}
		&::before{
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(0deg, #00000066 0%, #00000033 30%, #00000000 100%);
			pointer-events: none;
			z-index: 0;
			transition: all 0.3s ease;
		}
		&:hover::before{
			transform: translateY(100%);
		}
	}
}