.flow-section{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 16px;margin-top:8px;overflow:visible}
.flow-title-block{position:relative;display:grid;place-items:center;border-radius:50%;background:#fff0df;text-align:center}
.flow-title-block img{position:absolute;left:-26px;bottom:-12px;width:96px;opacity:.72}
.flow-title-block h2{position:relative;margin:0;font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.45}
.flow-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:0;list-style:none}
.flow-list li{position:relative;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto 1fr;gap:3px 6px;min-height:130px;padding:10px;border:1px solid #eee3d5;border-radius:10px;background:#fff}
.flow-list li>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;font-weight:800}
.flow-list li>i{grid-column:1;grid-row:2;align-self:end;color:#467d58;font-size:31px;text-align:center}
.flow-list li>div{grid-column:2;grid-row:1/3}
.flow-list h3{margin:1px 0 4px;font-size:10px;line-height:1.45}
.flow-list p{margin:0;font-size:8px;line-height:1.55}
.flow-illustration{display:block;width:auto;max-width:78px;height:60px;margin:8px auto 0;object-fit:contain}
.flow-arrow{position:absolute;z-index:2;top:50%;right:-13px;color:var(--orange)!important;font-size:22px!important;transform:translateY(-50%)}

/* 07 only. Reference artwork supplies the introductory oval/flowers;
   the existing heading remains in the accessibility tree. */
@media(min-width:821px){
  #flow[data-component="flow"]{height:154px;padding:4px 0;grid-template-columns:96px 1fr;gap:8px;background:transparent;border-color:transparent;box-shadow:none}
  #flow .flow-title-block{left:-8px;width:106px;height:96px;min-height:96px;border-radius:50%;background:#fff0df;align-self:start}
  #flow .flow-title-block img{display:none}
  #flow .flow-title-block h2{position:absolute;top:18px;left:0;width:106px;color:#3b3027;text-shadow:none;font-size:18px;line-height:24px;font-weight:500}
  #flow .flow-title-block::after{content:"";position:absolute;left:0;top:63px;width:98px;height:79px;background:url('../flow-exact-plants.png') center/98px 79px no-repeat;pointer-events:none}
  #flow .flow-list{height:146px;grid-template-columns:170px repeat(4,minmax(0,1fr));gap:6px}
  #flow .flow-list li{display:block;height:146px;min-height:146px;padding:0;border:1px solid #f3ede4;border-radius:9px;box-shadow:none}
  #flow .flow-list li>span{top:10px;left:14px;width:20px;height:20px;font-size:14px;font-weight:600;background:#ed5005;line-height:20px}
  #flow .flow-list li>div{padding:0;display:block;position:relative;height:100%}
  #flow .flow-list h3{position:absolute;top:13px;left:43px;min-height:16px;margin:0;font-size:9px;line-height:16px;font-weight:600;white-space:nowrap}
  #flow .flow-list p{position:absolute;top:37px;left:21px;margin:0;font-size:9px;line-height:15px;font-weight:500;color:#3b3027;white-space:nowrap}
  #flow .flow-list .flow-illustration{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:82px;max-width:100%;height:46px;max-height:54px;margin:0;object-fit:contain;object-position:center;overflow:visible}
  #flow .flow-list .flow-illustration{transform:none;bottom:auto;max-height:none;max-width:none;object-fit:contain}
  #flow .flow-list li:first-child .flow-illustration{left:17px;top:77px;width:130px;height:53px;bottom:auto}
  #flow .flow-list li:nth-child(2) .flow-illustration{left:38px;top:83px;width:57px;height:51px}
  #flow .flow-list li:nth-child(3) .flow-illustration{left:32px;top:85px;width:74px;height:48px}
  #flow .flow-list li:nth-child(4) .flow-illustration{left:15px;top:71px;width:90px;height:66px;bottom:auto}
  #flow .flow-list li:nth-child(5) .flow-illustration{left:16px;top:79px;width:101px;height:51px;bottom:auto}
  #flow .flow-list .flow-arrow{top:55px;right:-10px;font-size:22px!important;transform:translateY(-50%);color:#f35506!important}
}