/* One shared arrow silhouette for every action, independent of font or viewport. */
.action-arrow{
  display:inline-block;
  width:18px;
  height:18px;
  min-width:18px;
  flex:0 0 18px;
  vertical-align:middle;
  background-color:currentColor;
  -webkit-mask:url("/img/action-arrow.svg") center / contain no-repeat;
  mask:url("/img/action-arrow.svg") center / contain no-repeat;
}
.project-action,.dream-project-action{
  display:inline-flex;
  align-items:center;
  gap:14px;
  direction:rtl;
}
.dream-cards-3d .dream-project-action{
  grid-row:3;
  justify-self:start;
  padding:10px 16px;
  border-radius:10px;
  background:var(--gold);
  color:#111223;
  font-size:15px;
  font-weight:700;
}
/* Previous/next retain their navigation direction, using the same stroke. */
.dream-arrow-prev .action-arrow{transform:rotate(-45deg)}
.dream-arrow-next .action-arrow{transform:rotate(135deg)}
@media(max-width:859px){
  .dream-cards-3d .dream-project-action{padding:8px 13px;font-size:14px}
}