Four card component using CSS grid

What challenges did you encounter, and how did you overcome them?

Initially, I had the following code snippet, which caused accessibility issues by reading the text twice:

<h1 class="text-preset-1">
  <div class="text-preset-2">Reliable, efficient delivery</div>
  Powered by Technology
</h1>

The screen reader declared that it is a heading level 1 with 2 elements, and the texts were repeated twice, which is not a good user experience.

Fixed it by the following:

<h1 class="text-preset-1">
  Reliable, efficient delivery Powered by Technology
</h1>

.text-preset-1 {
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-4);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-1);
}

.text-preset-1::first-line {
  font-weight: var(--font-weight-extra-light);
  font-size: var(--font-size-4);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-1);
}

In the fixed approach, the heading 1 contains the text without any child HTML elements. This prevents the text from being repeated twice. The different style within the heading is fixed by using ::first-line

What specific areas of your project would you like help with?

Is there anything else I can improve in terms of accessibility or image rendering approach?