{% extends 'site/site.html.twig' %}

{% block headtitle %}
{{ parent() }}
- formation
{% endblock %}

{% block stylesheets %}
<style>
.articles .card {
	
		color: #fff;
		display: grid;
		place-items: center;
		width: 100%;
		/* max-width: 21.875rem; */
		height: 360px;
		overflow: hidden;
		border-radius: 0.625rem;
		box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
	
  }
  
  .articles  .card > * {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
  }
  
.articles  .card__background {
	object-fit: cover;
	max-width: 100%;
	height: 36.125rem;
  }
  
  .articles .card__content {

    --flow-space: 0.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: flex-end;
    height: 55%;
    padding: 0 1.25rem 1.875rem;
    background: linear-gradient( 180deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.3) 10%, hsl(0, 0%, 0%) 100% );
  }
  
  .articles .card__content--container {
	--flow-space: 1.25rem;
  }
  
  .articles .card__title {
    position: relative;
    FONT-SIZE: 16PX;
    width: fit-content;
    width: -moz-fit-content;
    MARGIN-BOTTOM: 10PX;
}
  
  .articles  .card__title::after {
	content: "";
	position: absolute;
	height: 0.3125rem;
	width: calc(100% + 1.25rem);
	bottom: calc((1.25rem - 0.5rem) * -1);
	left: -1.25rem;
	background-color: var(--brand-color);
  }
  
  .articles .card__button {
	padding: 0.75em 1.6em;
	width: fit-content;
	width: -moz-fit-content; /* Prefijo necesario para Firefox  */
	font-variant: small-caps;
	font-weight: bold;
	border-radius: 0.45em;
	border: none;
	background-color: var(--brand-color);
	font-family: var(--font-title);
	font-size: 1.125rem;
	color: var(--black);
  }
  
  .articles .card__button:focus {
	outline: 2px solid black;
	outline-offset: -5px;
  }
  
  @media (any-hover: hover) and (any-pointer: fine) {
	.articles .card__content {
	  transform: translateY(62%);
	  transition: transform 500ms ease-out;
	  transition-delay: 500ms;
	}
  
	.articles .card__title::after {
	  opacity: 0;
	  transform: scaleX(0);
	  transition: opacity 1000ms ease-in, transform 500ms ease-out;
	  transition-delay: 500ms;
	  transform-origin: right;
	}
  
	.articles .card__background {
	  transition: transform 500ms ease-in;
	}
  
	.articles .card__content--container > :not(.card__title),
	.articles .card__button {
	  opacity: 0;
	  transition: transform 500ms ease-out, opacity 500ms ease-out;
	}
  
	.articles .card:hover,
	.articles .card:focus-within {
	  transform: scale(1.05);
	  transition: transform 500ms ease-in;
	}
  
	.articles .card:hover .card__content,
	.articles .card:focus-within .card__content {
	  transform: translateY(0);
	  transition: transform 500ms ease-in;
	}
  
	.articles .card:focus-within .card__content {
	  transition-duration: 0ms;
	}
  
	.articles .card:hover .card__background,
	.articles .card:focus-within .card__background {
	  transform: scale(1.3);
	}
  
	.articles .card:hover .card__content--container > :not(.card__title),
	.articles .card:hover .card__button,
	.articles .card:focus-within .card__content--container > :not(.card__title),
	.articles .card:focus-within .card__button {
	  opacity: 1;
	  transition: opacity 500ms ease-in;
	  transition-delay: 1000ms;
	}
  
	.articles .card:hover .card__title::after,
	.articles .card:focus-within .card__title::after {
	  opacity: 1;
	  transform: scaleX(1);
	  transform-origin: left;
	  transition: opacity 500ms ease-in, transform 500ms ease-in;
	  transition-delay: 500ms;
	}
  } 
</style>
{% endblock %}

{% block page %}


	<div class="container-fluid">
		<div class="row mb-5">
			<div class="col-12 pr-0 pl-0 text-center">
				<div class="nom-page">
					Accueil > <span>Nos événements</span>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row mt-5 mb-5">
			<div class="col-12 text-center">
				<div class="block-formation-titre padding-fixed">
					Nos <span> Evénements</span>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
			<div class="row">
			{% for evenement in evenements %}
				<div class="col-12 col-lg-4">
					<div class="articles">
						<article class="card">
							<img class="card__background" src="{% if evenement.image is not null %} {{'uploads/event/' ~ evenement.image}} {% else %} '' {% endif %}"
								alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
								width="1920" height="2193" />
							<div class="card__content | flow">
								<div class="card__content--container | flow">
									<h1 class="card__title">{{evenement.wording}}</h1>
									<p class="card__description">
										{{evenement.wording}}
									</p>
								</div>
								<a href="{{ path('details_evenement_site', {'id': evenement.id }) }}" class="card__button">En savoir plus <i class="fa fa-arrow-right ml-3"></i></a>
							</div>
						</article>
					</div>
				</div>
			{% endfor %}
				<div class="col-12 col-lg-4">
					<div class="articles">
						<article class="card">
							<img class="card__background" src="{{asset('uploads/event/article2.jpg')}}"
								alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
								width="1920" height="2193" />
							<div class="card__content | flow">
								<div class="card__content--container | flow">
									<h2 class="card__title">EVENEMENT 2</h2>
									<p class="card__description">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum in
										labore laudantium deserunt fugiat numquam.
									</p>
								</div>
								<button class="card__button">En savoir plus <i class="fa fa-arrow-right ml-3"></i></button>
							</div>
						</article>
					</div>
				</div>
				<div class="col-12 col-lg-4">
					<div class="articles">
						<article class="card">
							<img class="card__background" src="{{asset('uploads/event/article3.jpg')}}"
								alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
								width="1920" height="2193" />
							<div class="card__content | flow">
								<div class="card__content--container | flow">
									<h2 class="card__title">EVENEMENT 3</h2>
									<p class="card__description">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum in
										labore laudantium deserunt fugiat numquam.
									</p>
								</div>
								<button class="card__button">En savoir plus <i class="fa fa-arrow-right ml-3"></i></button>
							</div>
						</article>
					</div>
				</div>
			</div>
		</div>


</body>

{% endblock %}