/* Separate connector arrows from the cards instead of painting over the next illustration. */
@media(min-width:1001px){
.reference-design #flow .journey{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:32px}
.reference-design #flow .journey>li:not(:last-child)::after{
 content:'→';display:block;position:absolute;left:auto;right:-28px;top:108px;bottom:auto;
 width:24px;height:24px;font-size:23px;line-height:24px;text-align:center;
 transform:translateY(-50%);pointer-events:none;
}
}
@media(max-width:1000px){
.reference-design #flow .journey{grid-template-columns:1fr;gap:16px;max-width:680px;margin-inline:auto}
.reference-design #flow .journey>li{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;text-align:left;padding:20px 16px}
.reference-design #flow .journey-number{grid-column:1;grid-row:1;justify-self:start;width:fit-content}
.reference-design #flow .journey-icon{grid-column:1;grid-row:2;width:112px;height:100px}
.reference-design #flow .journey-icon img{width:112px;height:100px;max-width:none}
.reference-design #flow .journey-content{grid-column:2;grid-row:1 / 3;text-align:left}
.reference-design #flow .journey>li::after{display:none!important}
}
@media(max-width:374px){
.reference-design #flow .journey>li{grid-template-columns:92px minmax(0,1fr);column-gap:12px;padding:18px 12px}
.reference-design #flow .journey-icon,.reference-design #flow .journey-icon img{width:92px;height:92px}
}
/* Shift the photographed subject left while still covering the full right edge. */
@media(min-width:801px){
.reference-design .hero-slides .hero-business-image{left:18%;width:85%;object-position:50% 35%}
}
@media(max-width:800px){
.reference-design .hero-slides .hero-business-image{object-position:72% 45%}
}
@media(min-width:1001px){.reference-design #flow .journey{max-width:none;width:100%}}
@media(min-width:801px){.reference-design .hero-slides .hero-business-image{left:16%;width:87%}}