php-gallery/css/image.css

/*
  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/
.image-container {
  margin: 0 0 2rem; padding: 0;

  width: calc(100vw - var(--space-medium));
  height: 69vh;

  position: relative;

  transition: height 0.15s cubic-bezier(.19,1,.22,1);
}

@media (max-width: 600px) {
  .image-container {
    height: 35vh;
  }
}

.image {
  max-width: 100%;
  width: auto;
  max-height: 100%;
  height: auto;

  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);

  /*background-color: var(--bg);

  outline: 0.5rem solid var(--bg);*/

  border-radius: var(--rad);
}

.image-description {
  margin: 0 0 2rem; padding: 0.5rem;

  background-color: var(--bg); color: var(--fg);

  border: 0.2rem solid var(--green);
  outline: 0.5rem solid var(--bg);

  border-radius: var(--rad);
  box-shadow: var(--shadow);
}

.image-detail {
  margin: 0 0 2rem; padding: 0.5rem;

  background-color: var(--bg); color: var(--fg);

  word-wrap: break-word;

  border: 0.2rem solid var(--green);
  outline: 0.5rem solid var(--bg);

  border-radius: var(--rad);
  box-shadow: var(--shadow);
}

.danger-zone {
  margin: 0 0 2rem; padding: 0.5rem;

  background-color: var(--bg); color: var(--fg);

  border: 0.2rem solid var(--red);
  outline: 0.5rem solid var(--bg);

  border-radius: var(--rad);
  box-shadow: var(--shadow);
}