:root {
  --color2: #00B4DD;
  --color3: #E75112;
  --vinyleBleu15: #172983; }

.galerie {
  display: block;
  background-color: transparent;
  padding: 1px;
  margin-bottom: 1rem; }
  .galerie::after {
    clear: both;
    content: "";
    display: table; }

.galerie-item {
  display: block;
  float: left;
  position: relative;
  width: 50%;
  height: 0;
  padding-bottom: 50%; }
  @media only print, only screen and (min-width: 48.063em) {
    .galerie-item {
      width: 33.3333%;
      padding-bottom: 33.3333%; } }
  @media only print, only screen and (min-width: 60.063em) {
    .galerie-item {
      width: 25%;
      padding-bottom: 25%; } }
  .galerie-item .bt {
    display: block;
    position: absolute;
    text-decoration: none;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat; }
    .galerie-item .bt > img {
      opacity: 0; }
    .galerie-item .bt > .bt-title {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      min-height: 3em;
      padding: 0.5rem 1rem;
      /*background-color: #000;*/
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
      font-size: 0.9em;
      line-height: 1em;
      color: #FFF;
      text-transform: uppercase;
      font-weight: 600;
      text-shadow: 1px 1px 1px #000; }
    .galerie-item .bt:hover > .bt-title {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 100%); }
  .galerie-item.btRetour .bt {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center; }
    .galerie-item.btRetour .bt:before {
      content: '\2039';
      display: block;
      text-align: center;
      font-size: 8rem;
      line-height: 1em;
      color: var(--color2);
      margin-top: -3rem; }