/* Application scenes match the two-by-two buyer layout. Text remains selectable and translatable. */
.sino-application-grid.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:#fff}
.scene-grid>.scene-card{display:flex;align-items:flex-end;height:auto;min-height:410px;aspect-ratio:3/2;min-width:0}
.scene-grid>.scene-card:only-child{grid-column:1/-1;max-width:760px;width:100%;justify-self:center}
.scene-card:after{background:linear-gradient(0deg,rgba(37,42,39,.95),rgba(37,42,39,.76) 22%,rgba(37,42,39,.22) 48%,transparent 74%)}
.scene-card>.scene-caption{position:relative;inset:auto;width:100%;padding:30px;display:flex;gap:22px;align-items:center}
.scene-icon{display:flex;flex:0 0 80px;padding-right:19px;border-right:1px solid rgba(255,255,255,.72);align-self:stretch;align-items:center}
.scene-icon>svg{display:block;width:60px;height:68px}
.scene-copy{flex:1;min-width:0}
.scene-copy h3{display:flex;align-items:baseline;gap:12px;font-size:25px;line-height:1.25;letter-spacing:-.025em}
.scene-copy h3>span{min-width:0;overflow-wrap:anywhere}
.scene-copy h3>svg{width:26px;height:26px;flex:0 0 26px;align-self:center}
.scene-subtitle{display:block;font-size:20px;line-height:1.35;margin-top:5px}
.agri-site .scene-copy p{font-size:15px;line-height:1.5;color:#fff;margin:10px 0 0;max-width:480px}
.scene-card:focus-visible{outline:3px solid #183d32;outline-offset:4px}
.scene-card:hover h3>svg{transform:translateX(3px);transition:transform .2s}
@media(max-width:1100px){
  .scene-grid>.scene-card{min-height:365px}
  .scene-card>.scene-caption{padding:24px 20px;gap:15px}
  .scene-icon{flex-basis:61px;padding-right:14px}
  .scene-icon>svg{width:46px;height:56px}
  .scene-copy h3{font-size:22px;gap:8px}
  .scene-subtitle{font-size:18px}
  .agri-site .scene-copy p{font-size:14px}
}
@media(max-width:700px){
  .sino-application-grid.scene-grid{grid-template-columns:1fr;gap:16px}
  .scene-grid>.scene-card{min-height:365px}
  .scene-card>.scene-caption{padding:27px 23px;gap:18px}
  .scene-copy h3{font-size:24px}
}
@media(max-width:380px){
  .scene-card>.scene-caption{padding:22px 16px;gap:13px}
  .scene-icon{flex-basis:47px;padding-right:10px}
  .scene-icon>svg{width:36px;height:47px}
  .scene-copy h3{font-size:21px}
  .scene-copy h3>svg{width:21px;height:21px;flex-basis:21px}
  .scene-subtitle{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.scene-card>img,.scene-card:hover h3>svg{transition:none;transform:none}}
