.img > img,
.imgp > img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 2px 2px 2px 2px;
  border-radius: 7px;
}

.container > div,
.containerp > div {
  margin: 2px 2px 2px 2px;
  border-radius: 7px;
  padding: 5px;

  border: 1px solid #61556b;
  box-shadow: 4px 4px 3px #3d3644;
}

.container:hover,
.containerp:hover {
  transform: translate(15px, -15px);
  transition-duration: 200ms;

}
.container:hover .des2{
display: block;
transition-duration: 200ms;
}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px 10px;
  grid-template-areas:
    "img titre titre titre titre titre titre"
    "img date date lieux lieux tarif tarif"
    "img des des des des des des"
    "des2 des2 des2 des2 des2 des2 des2";
  width: auto;
  margin: 15px 15px 15px 15px;
  cursor:help;
  transition-duration: 100ms;
}

.containerL {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 10px 10px;
  grid-template-areas:
    "titre date lieux tarif"
    "des des des des"
    ". img img .";
  width: auto;
  margin: 15px 15px 15px 15px;

  transition-duration: 100ms;
}

.containerp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px 10px;
  grid-template-areas: "titre date ";
  width: auto;
  margin: 15px 15px 15px 15px;

  transition-duration: 100ms;
}

.container {
  border: 1px solid #c0aad5;
  box-shadow: 8px 8px 5px #c0aad5;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
.containerp {
  border: 1px solid #61556b;
  box-shadow: 8px 8px 5px #3d3644;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #575757, #1b1b1b 40%, #000000);
}

.img,
.imgp {
  grid-area: img;
  /* background-color:rgba(255, 0, 179, 0.5);*/
}
.des {
  grid-area: des;
  background-color: rgba(255, 0, 140, 0.5);
  background-image: url("lien-t5.png");
}
.des2 {
  grid-area: des2;
  background-color: rgba(255, 0, 140, 0.5);
  background-image: url("lien-t5.png");
  /*visibility: hidden;*/
  display: none;
}
.titre {
  grid-area: titre;
  background-color: rgba(208, 255, 0, 0.5);
  background-image: url("lien-t4.png");
}
.date {
  grid-area: date;
  background-color: rgba(255, 0, 0, 0.5);
  background-image: url("lien-t1.png");
}
.lieux {
  grid-area: lieux;
  background-color: rgba(0, 4, 255, 0.5);
  background-image: url("lien-t2.png");
}
.tarif {
  grid-area: tarif;
  background-color: rgba(119, 0, 255, 0.5);
  background-image: url("lien-t3.png");
}

.desp {
  grid-area: des;
  background-color: rgba(145, 145, 145, 0.568);
}
.titrep {
  grid-area: titre;
  background-color: rgba(251, 255, 0, 0.2);
}
.datep {
  grid-area: date;
  background-color: rgba(255, 0, 179, 0.2);
}
.lieuxp {
  grid-area: lieux;
  background-color: rgba(0, 255, 0, 0.2);
}
.tarifp {
  grid-area: tarif;
  background-color: rgba(119, 0, 255, 0.2);
}