Instagram風正方形投稿埋め込みカード

<div class="d06-15-02-card">
          <div class="d06-15-02-head">
            <span class="d06-15-02-avatar"></span>
            <span class="d06-15-02-uname">green_leaf_life</span>
            <span class="d06-15-02-dots">&#8942;</span>
          </div>
          <div class="d06-15-02-photo"></div>
          <div class="d06-15-02-actions">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#262626" stroke-width="2"><path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0112 5a5.5 5.5 0 019.5 7c-2.5 4.5-9.5 9-9.5 9z"/></svg>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#262626" stroke-width="2"><path d="M21 11.5a8.4 8.4 0 01-8.5 8.4H4l3-3.2a8.4 8.4 0 1114-5.2z"/></svg>
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#262626" stroke-width="2"><path d="M7 7h8v3l4-4-4-4v3H5v6h2V7zm10 10H9v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
          </div>
          <div class="d06-15-02-likes">1,204件のいいね</div>
          <div class="d06-15-02-caption"><strong>green_leaf_life</strong> 今日の朝ごはん、庭のハーブを添えて。</div>
        </div>

.d06-15-02-card{ width:100%; max-width:210px; background:#fff; border:1px solid #dbdbdb; border-radius:8px; overflow:hidden; text-align:left; }
        .d06-15-02-head{ display:flex; align-items:center; gap:7px; padding:8px 10px; }
        .d06-15-02-avatar{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#f58529,#dd2a7b 50%,#515bd4); flex-shrink:0; }
        .d06-15-02-uname{ font-size:10.5px; font-weight:700; color:#262626; flex:1; }
        .d06-15-02-dots{ color:#262626; font-size:12px; }
        .d06-15-02-photo{ height:110px; background:linear-gradient(135deg,#ffd3a5,#fd6585); }
        .d06-15-02-actions{ display:flex; gap:9px; padding:8px 10px 2px; }
        .d06-15-02-likes{ padding:4px 10px 0; font-size:10.5px; font-weight:700; color:#262626; }
        .d06-15-02-caption{ padding:3px 10px 10px; font-size:10.5px; color:#262626; line-height:1.4; }