.vanilla-zoom {
    width: 100%;
    display: flex;
}

.vanilla-zoom .sidebar {
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
}

.vanilla-zoom .sidebar img.small-preview{
    width: 100%;
    margin-bottom: 5px;
    cursor: pointer;
}

.vanilla-zoom .sidebar img.small-preview:last-child{
    margin-bottom: 0;
}

.zoomed-image {
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
}

@media (max-width: 768px) {
  .vanilla-zoom .sidebar {
    flex: 1;
  }

  .vanilla-zoom .sidebar img.small-preview {
    cursor: auto;
    margin-bottom: 12px;
  }

  .zoomed-image {
    display: none;
  }
}