#portfolio {
  background: #fff;
  overflow: hidden;
}

#portfolio .portfolio-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Keep the first project readable while the carousel loads. */
#portfolio .portfolio-carousel:not(.slick-initialized) .portfolio-slide:not(:first-child) {
  display: none;
}

#portfolio .portfolio-slide {
  width: min(33.333333vw, 400px);
  padding: 0 4px;
  min-width: 0;
}

#portfolio .portfolio-card {
  margin: 0;
  background: #fff;
}

#portfolio .portfolio-image {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(.94);
  transform-origin: top center;
  opacity: .3;
  transition: transform .45s ease, opacity .45s ease;
}

#portfolio .slick-center .portfolio-image,
#portfolio .portfolio-carousel:not(.slick-initialized) .portfolio-image {
  transform: scale(1);
  opacity: 1;
}

#portfolio .portfolio-caption {
  padding: 28px 12px 12px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  color: #543600;
  font-size: clamp(18px, 1.6vw, 30px);
  line-height: 1.35;
  visibility: hidden;
}

#portfolio .slick-center .portfolio-caption,
#portfolio .portfolio-carousel:not(.slick-initialized) .portfolio-caption {
  visibility: visible;
}

#portfolio .portfolio-name {
  margin: 0 0 4px;
  font: inherit;
  font-size: clamp(24px, 1.9vw, 36px);
  color: #650029;
}

#portfolio .portfolio-arrow {
  position: absolute;
  top: 40%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #111;
  cursor: pointer;
  transform: translateY(-50%);
}

#portfolio .portfolio-prev { left: 3%; }
#portfolio .portfolio-next { right: 3%; }

#portfolio .portfolio-arrow span {
  display: block;
  width: 25px;
  height: 25px;
  border-top: 6px solid currentColor;
  border-right: 6px solid currentColor;
  transform: rotate(45deg);
}

#portfolio .portfolio-prev span { transform: rotate(-135deg); }
#portfolio .portfolio-arrow:hover { background: rgb(255 255 255 / 65%); }
#portfolio .portfolio-arrow:focus-visible { outline: 3px solid #650029; outline-offset: 3px; }

@media (max-width: 767px) {
  #portfolio .portfolio-slide { width: 72vw; }
  #portfolio .portfolio-caption { padding-top: 20px; }
  #portfolio .portfolio-arrow { width: 40px; height: 48px; }
  #portfolio .portfolio-arrow span { width: 18px; height: 18px; border-width: 4px; }
  #portfolio .portfolio-prev { left: 1%; }
  #portfolio .portfolio-next { right: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio .portfolio-image { transition: none; }
}