.portfolio-aside {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.portfolio-slides { display: grid; min-width: 0; }
.portfolio-slide {
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto;
  min-width: 0;
}
.portfolio-slide .portfolio-image { max-height: none; }
.portfolio-slide .portfolio-caption { padding: 18px clamp(14px, 2vw, 25px) 10px; }
.portfolio-slide .portfolio-caption h3 { margin: 0 0 4px; }
.portfolio-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #c9c0ac;
  padding: 3px clamp(12px, 2vw, 22px);
}
.portfolio-counter { color: #65583c; font: 650 12px/1.4 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .09em; }
.portfolio-arrows { display: flex; gap: 4px; }
.portfolio-arrows button { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); }
.portfolio-arrows button:hover { background: #d8ceba; }
.portfolio-arrows button:focus-visible { outline-offset: -3px; }
.portfolio-arrows .icon { width: 19px; height: 19px; }
.portfolio-arrows [data-gallery-prev] .icon { transform: rotate(180deg); }
@media (max-width: 640px) {
  .portfolio-aside { grid-template-rows: auto auto; }
  .portfolio-slide { grid-template-columns: .78fr 1fr; grid-template-rows: auto; }
  .portfolio-slide .portfolio-image { min-height: 160px; }
  .portfolio-slide .portfolio-caption { padding: 15px; }
}