/* Images that zoom when hovered */

.block-image-caption {
    font-family: sans-serif;

    background-color: rgba(153, 151, 151, 0.486);
    color: rgba(240, 240, 240, 0.808);

    /* Left-aligned text */
    text-align: center;

    /* No space above */
    margin-top: 0;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    /* "Bei border-box ist das padding schon in width und height eingerechnet" -Ole */
    box-sizing: border-box;
    padding: 0.5em;
    width: 100%
}

.block-image-container {
  /* Do not allow other elements next to this one (put them below) */
  display: block;
  /* Center container */
  margin-left: auto; 
  margin-right: auto;

  /* Center contents */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /* Set width to 40% of the page's width and keep the aspect ratio */
  width: 30rem;
  height: auto;
}

.block-image-zoom-container {
    overflow: hidden; /* Parts of children that are outside of the parent are not rendered */
}

.block-image {
  /* Fit size to container, keeping the aspect ratio */
  width: 100%;
  height: auto;

  /* Smooth transition */
  transition: transform 0.15s ease;
}

.block-image:hover {
  /* Zoom in a tiny bit when hovering over the image */
  transform: scale(1.025);
}