<div class="card related-links" [ngClass]="{'related-links--dark': inDarkMode}" *ngIf="data">
  <div class="row">
    <div class="col-md-12" *ngIf="data.image.mediaUrl" [ngClass]="{ 'col-sm-6 align-self-sm-center order-sm-2 order-md-1': data.image }">
      <img [src]="data.image.mediaUrl" class="card-img">
    </div>
    <div class="col-md-12" [ngClass]="{ 'col-sm-6 order-sm-1 order-md-2': data.image }" *ngIf="data.title || data.linkTargets.length > 0">
      <div class="card-header" [ngClass]="{'mt-4': data.image.mediaUrl}" *ngIf="data.title">
        {{data.title}}
      </div>
      <div class="list-group list-group-flush">
        <a component-link [linkObject]="link.linkObject" class="list-group-item list-group-item-action" *ngFor="let link of data.linkTargets"> 
          <div class="card-title mb-1">
            <i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/pdf' " class="icon-related-pdf"></i>
            <i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/zip' " class="icon-link-download"></i>
            {{link.title}}
            <span *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/pdf'">{{link.fileSize}}</span>
            <i class="icon-link-openNewWindow" *ngIf="link.newWindow"></i>
          </div>
          <p class="mb-1" *ngIf="link.useDescription" style="text-decoration: none;">
            {{link.description}}
          </p>
        </a>
      </div>

      <div class="card-body" *ngIf="data.readMoreTitle">
        <a component-link [overrideURL]="data.readMoreLink" [showChevron]="true">
          {{data.readMoreTitle}} 
        </a>
      </div>
    </div>
  </div>
</div>

./related-links-top.component.scss

@import "src/app/styles/helpers";

.related-links {
    background-color: transparent;
    border: none;
    color: $cool-grey;

    &--dark {
        color: $white;
    }

    .card-header {
        background-color: transparent;
        padding: calc-rem(12) calc-rem(2);
        border-color: $cool-grey;
        @include font-scale(16, medium);
        letter-spacing: calc-rem(2);
    }

    .list-group {
        ::ng-deep &-item {
            border-color: $cool-grey;
            color: $blue;
            background-color: transparent;
            padding: calc-rem(12) calc-rem(2);

            &:hover {
                // Remove the standard hover-behavior
                text-decoration: none;

                // Only hover on the title and not the p-tag (if it exists)
                .card-title {
                    text-decoration: underline;
                }
            }

            // Remove the automatically added new-window icon in order to
            // position it to the .card-title (icon is added in DOM)
            &[target="_blank"]:after {
                content: none;
            }

            p {
                @include font-size(14);
                color: $cool-grey;
            }
        }
    }

    .card-body {
        padding: calc-rem(12) calc-rem(2);

        ::ng-deep a {
            text-transform: uppercase;
            color: $blue; 
            @include font-scale(14, uppercase);
        }

        .icon-chevronLarge-next {
            color: $blue;
            @include font-size(14);
        }
    }

    &--dark {
        .card-header {
            border-color: $white;
        }

        .list-group {
            ::ng-deep &-item {
                border-color: $white;
                color: $light-blue;

                p {
                    color: $white;
                }
            }
        }

        .card-body {    
            ::ng-deep a {
                color: $light-blue; 
            }

            .icon-chevronLarge-next {
                color: $light-blue;
            }
        }
    }
}