.carousel
{
  border: 1px solid black;

  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 5px;

  height: 75vh;
  width: 50vw;

  overflow: hidden;
}

.carousel img
{
  display: block;

  max-width: 100%;
  min-width: 100%;
}

.carousel-nav
{
  overflow-x: hidden;
  overflow-y: scroll;
}
.carousel-nav a
{
  display: flex;

  width: 100%;

  margin-bottom: 5px;

  max-height: 25vh;
}
.carousel-nav a:last-child
{
  margin-bottom: 0;
}

.carousel-nav-img
{
  filter: saturate(0);

  object-fit: cover;

  transition: 0.3s ease all;
}
.carousel-nav-img:hover
{
  filter: saturate(1);

  transform: scale(1.025);
}

.carousel-gallery
{
  overflow: scroll;

  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.carousel-gallery-img
{
  margin-bottom: 5px;

  min-height: 50vh;

  object-fit: cover;

  scroll-snap-align: center;
}