body {
    height:100vh;
    margin:0;
    display:flex;
    flex-direction:column;
}

footer {
    margin-top:auto; 
}

  
.grid-item {
    margin-right: .75em;
    margin-bottom: .75em;
    flex-grow: calc(var(--ratio)*100);
    --ratio: calc(var(--width)/var(--height));
    --row-height: 15rem;
    flex-basis: calc(var(--ratio)*var(--row-height));
    z-index: 1;
}

.grid-container{
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-top: 5px;
}

.grid-container:after {
    --width: 1px;
    --height: 1;
    --ratio: calc(var(--width)/var(--height));
    --row-height: 17rem;
    content: "";
    flex-basis: calc(var(--ratio)*var(--row-height));
    flex-grow: 1000000;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #8e8e8e; 
  border-radius: 5px;
}
  
/* Handle */
::-webkit-scrollbar-thumb {
  background: #8e8e8e; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #adadad; 
}

.p-istock-elem {
  padding-top: 75%;
}

.text-header {
  font-size: 16px;
  line-height: 1.25rem;
}

@media (min-width: 640px) { 
  .text-header {
    font-size: 15px;
    line-height: 1.25rem;
  }  
}