/* Section shell + header row */
.bgs__section{padding:72px 0 16px;}
.bgs__wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.bgs__rowHead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:28px;}
.bgs__headCol{display:flex;flex-direction:column;gap:14px;}
.bgs__note{max-width:34ch;font-size:15px;line-height:1.6;color:#7f8a9a;}

/* Eyebrow + accent headline */
.bgs__eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#9e8819;}
.bgs__eyebrow::before{content:"";width:22px;height:2px;background:currentColor;
  opacity:.7;border-radius:2px;}
.bgs__h{margin:0;font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.02em;
  line-height:1.04;color:#0a0429;text-wrap:balance;}
.bgs__h--h2{font-size:clamp(28px,3.4vw,40px);}
.bgs__accent{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:400;color:#9e8819;}

/* The card row */
.bgs__mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.bgs__miniCard{display:flex;gap:16px;align-items:center;background:#fff;
  border:1px solid #e5e1d6;border-radius:20px;padding:14px;
  box-shadow:0 2px 10px rgba(10,4,41,.06);}

/* Indigo thumbnail with the hexagon motif */
.bgs__miniThumb{flex:0 0 74px;height:96px;border-radius:12px;position:relative;
  overflow:hidden;display:flex;align-items:flex-end;padding:10px;
  background-image:url(../images/pattern-hex-gold.png),
    linear-gradient(160deg,#0a0429 0%,#0e063c 55%,#140a3a 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:top -14px right -20px,center;
  background-size:74px auto,cover;}
.bgs__miniSide{font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#e8c85a;}
.bgs__miniName{font-size:15px;font-weight:600;color:#0a0429;line-height:1.3;}
.bgs__miniName a{color:inherit;}
.bgs__miniPrice{font-size:15px;font-weight:700;color:#9e8819;}
Matching markup, in case you're pasting it into a Custom HTML element:

<section class="bgs__section" id="bgs-best">
  <div class="bgs__wrap">
    <div class="bgs__rowHead">
      <div class="bgs__headCol">
        <div class="bgs__eyebrow">Best sellers</div>
        <h2 class="bgs__h bgs__h--h2">What founders and marketers <span class="bgs__accent">buy</span> first.</h2>
      </div>
      <p class="bgs__note">Four downloads that do the most work in the first week.</p>
    </div>
    <div class="bgs__mini">
      <div class="bgs__miniCard">
        <div class="bgs__miniThumb"><span class="bgs__miniSide">Cowork</span></div>
        <div>
          <div class="bgs__miniName">The 2027 Marketing Plan</div>
          <div class="bgs__miniPrice">$79 AUD</div>
        </div>
      </div>
      <!-- repeat per product -->
    </div>
  </div>
</section>