/* Section 03 only: personal examples and the original card composition. */
#approach{background:#d5dfce}
#approach .four{overflow:visible}
#approach .cell{position:relative;border:0;color:var(--ink);text-align:left;isolation:isolate;z-index:0;transition:transform .3s ease,box-shadow .3s ease;transition-delay:0s}
#approach .cell .num{transition:opacity .2s ease}
#approach .cell h3{position:relative;transition:transform .3s ease;transform:translateY(0)}
#approach .cell-detail{display:block;position:absolute;left:20px;right:20px;top:var(--cell-detail-top,80px);margin:0;color:#35443b;font-size:13px;line-height:1.45;font-weight:400;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .25s ease,transform .3s ease,visibility .3s}
#approach .cell.is-active{z-index:2;transform:translateY(-4px) scale(1.03);box-shadow:0 5px 16px rgba(17,27,25,.07),0 0 0 1px rgba(17,27,25,.15)}
#approach .cell.is-active .num{opacity:0}
#approach .cell.is-active h3{transform:translateY(calc(-1 * var(--cell-title-lift,0px)))}
#approach .cell.is-active .cell-detail{opacity:1;visibility:visible;transform:translateY(0)}
@media(min-width:601px) and (max-width:1050px){#approach .cell-detail{left:14px;right:14px;font-size:11.5px;line-height:1.35}}
@media(max-width:600px){#approach .cell-detail{left:10px;right:10px;font-size:11px;line-height:1.3}#approach .cell.is-active{transform:translateY(-3px) scale(1.02)}}
@media(max-width:360px){#approach .four .cell{min-height:176px}#approach .cell-detail{left:10px;right:10px;font-size:11px;line-height:1.3}}
@media(prefers-reduced-motion:reduce){#approach .cell,#approach .cell *{animation:none!important;transition:none!important}#approach .cell.is-active{transform:none}}