/*====================================================
                   FORMATIONS
====================================================*/
.formation-wrap {
  display:flex;
}

.liste-formations {
    display:flex;
    flex-wrap:wrap;
}

.liste-formations > a {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:500px;
  height:300px;
  margin:16px auto;
  border-bottom:1px solid var(--desert-sand);
  color:var(--desert-sand);
  /* text-align:center; */
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  position:relative;
  transition:var(--short-transition);
  overflow:hidden;
  text-transform: uppercase;
}

.liste-formations > a h4 {
  font-family: 'Oswald';
}

.liste-formations > a > * {
  z-index:5;
}

.liste-formations > a .formation-title {
  font-size:1.7em;
  /* background-color:var(--brique); */
  color:white;
  margin:0;
  /* opacity:0.9; */
  padding:10px;
}

.liste-formations > a:hover > .formation-title {
  opacity:1;
}

.liste-formations > a:hover {
  filter:brightness(1.1);
}

.liste-formations > a:hover > * {
  transition:var(--short-transition) ease-in;
}

.liste-formations > a:before {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background-color:black;
  background-color:var(--brique);
  opacity:0.1;
  opacity:0.7;
  transition:var(--short-transition) ease-in;
}

.liste-formations > a:hover:before {
  opacity:0.5;
}

.formation-content {
  display:flex;
  justify-content:space-between;
}

.formation-content img {
  max-width:33%;
  object-fit:cover;
}

.formation-content p {
  padding:0 16px;
}

.formation-wrap article h2 {
  color:var(--rouge);
}

.formation-wrap article h3 {
  color:var(--brique);
}

.formation-wrap aside h2 {
  color:var(--desert-sand);
  font-size:1.5em;
}

.formation-wrap aside strong {
  color:white;
}


@media (max-width:578px) {
  .wrap.flex.formation-wrap {
    flex-direction:column;
  }

  .formation-wrap article,
  .formation-wrap aside {
    width:100%!important;
  }
}