.gall-item {
    height: auto;
    object-fit: cover;
    margin: 1rem 0;
    transition: all .5s ease;
    overflow: hidden;
    border-radius: 6px;
    max-height: 800px;
    display: flex;
    place-items: center;
    position: relative;
    cursor: pointer;
  
        .overlay {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 1;
          background: linear-gradient(to top, rgba(31, 31, 31, .9), rgba(31, 31, 31, 0));
          display: flex;
          opacity: 0;
          transition: all .6s ease;
        }
  
        figcaption {
          align-self: flex-end;
          display: flex;
          width: 100%;
          justify-content: space-between;
          padding: 1rem;
          transform: translateY(20px);
          transition: all .6s ease;
          color: var(--cream100);
  
          p {
              font-weight: 700;
              text-transform: uppercase;
          }
      }
        img {
          transition: all .2s ease;
          width: 100%;
          height: 100%;
          background-color: var(--grey700);

          &.loading {
            filter: blur(3px);
          }
      }
    
      &:hover {
          transform: scale(.97);
      }
  
      &:hover img {
          transform: scale(1.2);
      }
  
      &:hover .overlay {
        opacity: 1;
      }
      &:hover figcaption {
        transform: translateY(0px);
      }
}

@media (max-width: 576px) {
    .columns {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: fit-content;
      min-height: 100vh;
  
      .column {
        position: relative;
        width: 100%;
  
        &__rail {
          position: initial;
          height: fit-content;
          margin: 0;
        }
        &:nth-child(2) {
          left: 0;
        }
      }
    }
    .gall-item {
      .overlay {
        opacity: 1;
      }
  
      figcaption {
        transform: translateY(0px)
      }
    }
}