:root {
    --grid-gutter-l: calc(0.2 * 1rem);
    --grid-gutter-r: calc(0 * 1rem);
  }
  
  .body {
    background-color: #e2e2e2;
  }
  
  a, button {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
  }
  a:hover, button:hover {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
  }
  
  .h-300 .imggrid-pdd {
    max-height: 300px;
  }
  
  .h-500 .imggrid-pdd {
    max-height: 500px;
  }
  
  .h-800 .imggrid-pdd {
    max-height: 800px;
  }
  
  .h-v100 .imggrid-pdd {
    max-height: 100vh;
  }
  
  .h-v80 .imggrid-pdd {
    max-height: 80vh;
  }
  
  .h-v50 .imggrid-pdd {
    max-height: 50vh;
  }
  
  .h-v30 .imggrid-pdd {
    max-height: 33vh;
  }
  
  .up-grid {
    padding-top: var(--grid-gutter-l);
  }
  
  .imggrid-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin-left: calc(var(--grid-gutter-l) * -1);
    margin-right: var(--grid-gutter-r);
  }
  .imggrid-container .imggrid-pdd {
    padding-left: var(--grid-gutter-l);
    padding-right: var(--grid-gutter-r);
    padding-bottom: var(--grid-gutter-l);
    overflow: hidden;
  }
  .imggrid-container .imggrid-pdd:hover .imggrid-cover {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
    -webkit-transition: all 2s;
    transition: all 2s;
  }
  .imggrid-container .imggrid-cover {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: all 2s;
    transition: all 2s;
  }
  .imggrid-container .imggrid-s_top .imggrid-cover {
    -o-object-position: top;
       object-position: top;
  }
  .imggrid-container .imggrid-s_middle .imggrid-cover {
    -o-object-position: center;
       object-position: center;
  }
  .imggrid-container .imggrid-s_bottom .imggrid-cover {
    -o-object-position: bottom;
       object-position: bottom;
  }
  .imggrid-container .imggrid-caption {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: #fff;
  }
  .imggrid-container .imggrid-title {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: calc(1rem + 1vw);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-family: "Poltawski Nowy", serif;
    font-weight: 400;
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
  }
  .imggrid-container .imggrid-button {
    background-color: #fff;
    color: #131313;
    padding: 0.45rem 0.85rem;
    margin-top: 1.5rem;
    -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.35);
  }
  .imggrid-container .imggrid-button:hover {
    text-decoration: none;
    background-color: #131313;
    color: #fff;
  }
  .imggrid-container button {
    border: 0;
    cursor: pointer;
    max-width: 90%;
  }