#galerie,
li {
  margin: 0.1em;
  padding: 0.1em;
}

li {
  display: inline-block;
  list-style-type: none;
  width: 45%;
}

img {
  padding: 0;
  margin: 0;
  width: 100%;
}

a {
  padding: 0.1em;
}

a:focus,
a:hover {
  background: #09c;
}

@media all and (min-width: 35em) {
  li {
    width: 8em;
  }

  .details {
    position: fixed;
    right: 10%;
    top: 10%;
    background-color: #F1F3F4;
    border: 0.1em solid #3893ab;
    border-radius: 0 8px 8px;
    padding: 1em 1em .2em;
    width: 40em;
    max-height: 35em;
    overflow: auto;
    display: none;
  }

  .details img {
    width: 100%;
  }

  .details:target {
    display: block;
  }

  .close {
    width:0;
    height:0;
    border:0;
    text-shadow: none;
    color: transparent;
  }

  .close:after {
    position: absolute;
    top: 1em;
    right: 1em;
    content: "X";
    color: white;
    background: #c32e04;
    font: font: bold 1em/150% Georgia Times, serif;
    border: 0.1em solid #3983ab;
    border-radius:0 8px 8px;
    display: block;
    text-align:center;
    width: 1.5em;
    height: 1.5em;
    padding: 0.2em 0 0 0em;
  }
}