@props([
    'leftTitle' => null,
    'rightTitle' => null,
])
<div class="netgescon-two-cards">
    <div class="netgescon-card h-100">
        @if($leftTitle)
            <div class="netgescon-card-header"><strong>{!! $leftTitle !!}</strong></div>
        @endif
        <div class="netgescon-card-body">
            {{ $left ?? '' }}
        </div>
    </div>
    <div class="netgescon-card h-100">
        @if($rightTitle)
            <div class="netgescon-card-header"><strong>{!! $rightTitle !!}</strong></div>
        @endif
        <div class="netgescon-card-body">
            {{ $right ?? '' }}
        </div>
    </div>
</div>

<style>
.netgescon-two-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 991px){ .netgescon-two-cards{ grid-template-columns: 1fr; } }
.netgescon-two-cards .netgescon-card{ display:flex; flex-direction:column; }
.netgescon-two-cards .netgescon-card-body{ flex:1 1 auto; }
</style>
@props(['leftTitle' => null, 'rightTitle' => null])
<div class="grid md:grid-cols-2 gap-3 items-start">
  <div class="netgescon-card h-100">
    @if($leftTitle)
    <div class="p-2 bg-slate-50 border-b">
      <strong>{{ $leftTitle }}</strong>
    </div>
    @endif
    <div class="p-2">
      {{ $left ?? $slotLeft ?? '' }}
    </div>
  </div>
  <div class="netgescon-card h-100">
    @if($rightTitle)
    <div class="p-2 bg-slate-50 border-b">
      <strong>{{ $rightTitle }}</strong>
    </div>
    @endif
    <div class="p-2">
      {{ $right ?? $slotRight ?? '' }}
    </div>
  </div>
</div>
<style>
/* Equalize heights even with variable content; fallback via min-height for known sections */
.grid.items-start > .netgescon-card { align-self: stretch; }
</style>