<div class="container">
  <h2 *ngIf="title" class="title">{{title}}</h2>
  <div class="accordion" [id]="'accordion-' + accordionId" *ngIf="!desktopView">
    <div class="card" [id]="'card-' + col.boxId + '-' + accordionId" *ngFor="let col of columns; let i = index;">
      <div class="card-header" [id]="'heading-' + accordionId">
        <h5 class="mb-0">
          <a class="toggler" data-toggle="collapse" [href]="'#' + col.boxId + '-' + accordionId"
            [attr.aria-expanded]="i === 0" [attr.aria-controls]="col.boxId + '-' + accordionId">
            <i class="card-header-icon" [ngClass]="col.Icon"></i>
            <span *ngIf="!col.hasVideo">{{col.Title}}</span>
            <span *ngIf="col.hasVideo">{{col.Icon}}</span>
            <i class="card-header-chevron icon-chevronDown"></i>
            <i class="card-header-chevron icon-chevronUp"></i>
          </a>
        </h5>
      </div>
      <div [id]="col.boxId + '-' + accordionId" [ngClass]="{'collapse': true, 'show': i === 0}"
        [attr.aria-labelledby]="'heading-' + accordionId" [attr.data-parent]="'#accordion-' + accordionId">
        <div class="card-body">
          <div class="card-text">     
            <div *ngIf="col.hasVideo" video-player [videoJSON]="col.videojson">
            </div>
          </div>

          <ng-container *ngIf="!col.hasVideo">
            <div class="list-group list-group-flush" *ngIf="col.links && !col.Description">
              <a class="comp-link" component-link [linkObject]="link.linkObject"
                class="list-group-item list-group-item-action" *ngFor="let link of col.links">
                <div class="link-group-title">
                    <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 *ngIf="link.newWindow" class="icon-link-openNewWindow"></i>
                </div>
                <p class="mb-0" *ngIf="link.useDescription">
                  {{link.description}}
                </p>
              </a>
            </div>

            <p *ngIf="col.Description">
              {{col.Description}}
            </p>
          </ng-container>
        </div>

        <div class="card-footer" *ngIf="col.CtaButtonTitle">
          <a component-link [linkObject]="col.CtaButtonLinkTarget" class="btn btn-cool-grey button-link">
            {{col.CtaButtonTitle}}
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="card-group" [id]="accordionId" *ngIf="desktopView">
    <ng-container *ngFor="let col of columns; let i = index;">
      <div class="card">
        <div class="card-header">
          <h5 class="mb-0 d-inline-flex">
            <i class="card-header-icon" [ngClass]="col.Icon"></i>
            <span *ngIf="col.Title">{{col.Title}}</span>
          </h5>
        </div>

        <div class="card-body">
          <div class="card-text">

            <div *ngIf="col.hasVideo" video-player [videoJSON]="col.videojson" [videoDescription]="col.Description"></div>

            <ng-container *ngIf="!col.hasVideo">
              <div class="list-group list-group-flush" *ngIf="col.links && !col.Description">
                <a class="comp-link" component-link [linkObject]="c.linkObject"
                  class="list-group-item list-group-item-action" *ngFor="let c of col.links">
                  <div class="link-group-title">
                    <i *ngIf="c.linkObject?.LinkModelTarget?.MimeType === 'application/pdf' " class="icon-related-pdf"></i>
                    <i *ngIf="c.linkObject?.LinkModelTarget?.MimeType === 'application/zip' " class="icon-link-download"></i>
                    {{c.title}}
                    <span *ngIf="c.linkObject?.LinkModelTarget?.MimeType === 'application/pdf'"> {{c.fileSize}} </span>
                    <i *ngIf="c.openInNewWindow" class="icon-link-openNewWindow"></i>
                  </div>
                  <p class="mb-0" *ngIf="c.useDescription">{{c.description}}</p>
                </a>
              </div>

              <p *ngIf="col.Description">{{col.Description}}</p>
            </ng-container>
          </div>
        </div>

        <div class="card-footer" *ngIf="col.CtaButtonTitle">
          <a component-link [linkObject]="col.CtaButtonLinkTarget" class="btn btn-cool-grey button-link">
            {{col.CtaButtonTitle}}
          </a>
        </div>

      </div>
    </ng-container>
  </div>

./related-info-main.component.scss

@import "src/app/styles/helpers";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/list-group";

.title {
    padding-left: calc-rem(40);
    padding-bottom: calc-rem(35);
}

.accordion {
    border: 2px solid $slate;
}

.card-group {
    border: 2px solid $slate;
    padding-bottom: 0;
}

.card {
    
    :host-context(.bg-off-white) {
        background-color: $off-white;
    }

    &-header,
    &-body,
    &-footer {
        background-color: $white;

        ::ng-deep .bg-off-white & {
            background-color: $off-white;
        }
    }

    &-body {

        .video-description-text {
            color: $blue;
            @include font-scale(16, medium);
        }

        .list-group {
            &-item {
                border-bottom: 1px solid $slate !important;
                padding: calc-rem(10) 0;
                color: $blue;
                background-color: transparent;

                &:after {
                    content: none;
                }

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

                &:hover {
                    background-color: $blue;
                    padding-left: calc-rem(8);
                    color: $white;

                    &:hover {
                        text-decoration: none;
                    }

                    p {
                        color: $white;
                    }
                }
            }

            .comp-link:last-child {
                .list-group-item {
                    border-bottom: none !important;
                }
            }
        }
    }

    &-footer {
        .button-link {
            width: 100%;
        }
    }

    .accordion & {
        margin-left: calc-rem(30);
        margin-right: calc-rem(30);
        border: none;

        &:first-of-type,
        &:not(:first-of-type):not(:last-of-type) {
            border-bottom: 2px solid $slate;
        }

        &-header {
            position: relative;
            padding: calc-rem(30) 0;
            border-bottom: none;

            &-icon {
                padding-right: calc-rem(25);
            }

            &-chevron {
                text-align: right;
                position: absolute;
                top: 45%;
                right: calc-rem(12);
                @include font-size(12);
                color: $blue;
                font-style: normal;
            }

            .toggler {
                color: $cool-grey;
                display: block;
                text-decoration: none;

                &[aria-expanded=true] .icon-chevronDown {
                    display: none;
                }

                &[aria-expanded=false] .icon-chevronUp {
                    display: none;
                }
            }
        }

        &-body {
            padding-left: 0;
            padding-right: 0;
        }

        &-footer {
            border: none;
            text-align: center;
            padding-bottom: calc-rem(60);
        }
    }

    .card-group & {
        border-bottom: none;
        border-right: 2px solid $slate;
    
        &:last-child {
            border-right: none;
        }

        &-header {
            padding: calc-rem(40) calc-rem(40) calc-rem(20) calc-rem(70);
            border: none;
            @include font-scale(20, bold);
    
            &-icon {
                position: absolute;
                font-size: calc-rem(30);
                transform: translate(-45px, -7px);
            }
        }

        &-body {
            padding-left: calc-rem(70);
            padding-right: calc-rem(50);
        }

        &-footer {
            border: none;
            text-align: center;
            padding-bottom: calc-rem(60);
            padding-left: calc-rem(70);
            padding-right: calc-rem(50);
        }
    }    
}