横型・縦型2アスペクト比サムネイル

<div class="pair">
          <div class="wide">
            <span class="playbtn"><span class="tri"></span></span>
            <span class="label">横型 16:9</span>
          </div>
          <div class="tall">
            <span class="playbtn ptall"><span class="tri triSmall"></span></span>
            <span class="label">縦型 9:16</span>
          </div>
        </div>

.d07-15-10 .pair{display:flex;gap:10px;align-items:flex-end;}
        .d07-15-10 .wide{position:relative;width:170px;height:96px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#4a90c2,#1f4e70);}
        .d07-15-10 .tall{position:relative;width:72px;height:128px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#d1638a,#832f52);}
        .d07-15-10 .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;}
        .d07-15-10 .ptall{width:30px;height:30px;}
        .d07-15-10 .tri{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #16344a;margin-left:2px;}
        .d07-15-10 .triSmall{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #5c1f37;}
        .d07-15-10 .label{position:absolute;left:6px;bottom:6px;color:#fff;font-size:9.5px;font-weight:700;background:rgba(0,0,0,.5);padding:2px 5px;border-radius:3px;}