@import 'global.css';

/************************************************/
body {
   width:100vw;
   height:auto;
   padding:0px;
   margin:0px;
   background-color:rgba(77, 77, 77, 1);
   background-position:center middle;
   background-repeat:no-repeat;
   background-attachment:fixed;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
}

.GallerieContainer {
   display:block;
   position:relative;
   background-color:inherit;
   float:left;
   font-family: var(--me-FontFamily), var(--me-FontFamilyAlt);
   margin-top:15px;
   margin-bottom:15px;
   padding:15px;
   padding-left:35px;
   width: calc(100vw - 60px);
   height:auto;
   color:#000;
   border:0px solid black;
   overflow:visible;
}

.PictureFlexContainer {
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:space-around;
   align-items:flex-end;
   background-color:inherit;
   width: calc(100vw - 60px);
   border:0px solid black;
}

.PictureFlexItem {
   width: calc(100vw - 10vw);
   background-color:inherit;
   height:auto;
   margin:15px;
   overflow:visible;
}

.GalleriePicture {
   width:100%;
   height:auto;
}

.GalleriePicture:hover {
   border:1px solid white;
   box-shadow:0px -4px 8px 0px rgba(255, 255, 255, 0.4), 0px -6px 20px 0px rgba(255, 255, 255, 0.2),
      0px 4px 8px 0px rgba(255, 255, 255, 0.4), 0px 6px 20px 0px rgba(255, 255, 255, 0.2);
   transition:0.5s;
}

/***********************************************/
@media only screen and (min-width:576px) {
/***********************************************/
   .PictureFlexContainer {
      width: calc(100vw - 86px);
   }

   .PictureFlexItem {
      width: calc((100vw - 126px) / 3);
      height:auto;
   }
}

/***********************************************/
@media only screen and (min-width:768px) {
/***********************************************/
   .PictureFlexContainer {
      width: calc(100vw - 86px);
   }

   .PictureFlexItem {
      width: calc((100vw - 126px) / 3);
      height:auto;
   }
}

/***********************************************/
@media only screen and (min-width: 992px) {
/***********************************************/
   .PictureFlexContainer {
      width: calc(100vw - 86px);
   }

   .PictureFlexItem {
      width: clamp(150px, (100vw - 126px) / 3, 280px);
   }
}