.surf-coast-diagram{display:grid;grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:58px 105px 58px;align-items:center;gap:8px;margin:20px 0}
.surf-coast{text-align:center;border-radius:10px;background:#f3f7f4;padding:8px 4px;min-width:0}
.surf-coast span{display:block;font-size:13px;color:#626262}
.surf-coast strong{font-size:18px;color:#153e34;white-space:nowrap}
.surf-coast.north{grid-column:2;grid-row:1}
.surf-coast.west{grid-column:1;grid-row:2}
.surf-coast.east{grid-column:3;grid-row:2}
.surf-coast.south{grid-column:2;grid-row:3}
.surf-coast-island{position:relative;grid-column:2;grid-row:2}
.surf-coast-island svg{width:100%;height:100px;display:block}
.surf-coast-island>span{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:14px;color:#234b34}
.surf-coast-diagram{grid-template-columns:1fr 1.35fr 1fr}
.surf-report .surf-coast-diagram{margin:12px 0 20px}
.surf-report .surf-coast{background:#eaf4fa}
.surf-report .surf-coast strong{color:#075f78;font-size:21px}