:root {
	--color-menu: #FFFFFF;
	--color-menu-font: #fff;
	--color-menu-hover: #2e2e2e;

}
.logotype {
	background-image: url(../images/logo_white.svg);
}

.header {
  color: var(--color-menu-font);
  background-color: var(--color-background);
}

.online-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.online-gallery a {
    display: inline-block;
    margin-bottom: 24px;
    width: calc(50% - 4px);
    text-decoration: none;

    border-radius:3px;
    position:relative;
}
  
 
  
figure {
  margin: 0;
  overflow: hidden;
}

figcaption {
  margin-top: 0px;
  font-size: 110%;
  padding: 15px;
  text-align: center;
  position: static;
}

.online-gallery img {
  border: none;
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.online-gallery a:hover {
  box-shadow: 0 0 20px var(--color-link-hover);
}

.online-gallery p
{
    line-height:100%;
    margin-bottom: 40px;
}
.online-gallery .price
{
    position: absolute;
    bottom: 0;
    margin-bottom:15px;
}
  
.album {
  display: flex;
  flex-wrap: wrap;
}

.photo {
  /* margin: 1rem; */
  margin-bottom:0;
}

.photo4 {
  width: 100%;
}

.photo1 {
  width: 33.33%;
  /* float: left; */
  /* flex:33.33%; */
}

.photo2 {
  width: 50%;
  /* float: left; */
  /* flex: 50%; */
}

.photo3 {
  width: 66.66%;
  /* float: left; */
  /* flex:66.66%; */

}

.photo-margin {
  margin-right: 1%;
}


@media screen and (min-width: 0px) {
    .online-gallery a {
    width: calc(100%);
  }

  .photo1 { width: 100%; }
  .photo2 { width: 100%; }
  .photo3 { width: 100%; }
}
@media screen and (min-width: 480px) {
    .online-gallery a {
    width: calc(50% - 15px);
  }
  .photo1 { width: 33.33%; }
  .photo2 { width: 50%; }
  .photo3 { width: 66.66%; }

}
@media screen and (min-width: 769px) {
    .online-gallery a {
    width: calc(33.33% - 15px);
  }

  .photo1 { width: 33.33%; }
  .photo2 { width: 50%; }
  .photo3 { width: 66.66%; }

}