ServicesSummary.vue

import CyberSecLogo from '../assets/images/logos/CyberSecLogo.png';
<template>
  <div class="services-summary">
    <v-container fluid>
      <v-layout row wrap justify-center name="services-summary">
        <v-flex lg2 md3 sm6 xs12 v-if="!ignoreIronBank">
          <LogoCard
            :logoSource="ibLogo"
            class="serviceHeight"
            logoCardText="Download DoD-wide approved containers or harden with Iron Bank"
            logoCardUrl="/products/iron-bank/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12 v-if="!ignoreBigBang">
          <LogoCard
            :logoSource="bbLogo"
            class="serviceHeight"
            logoCardText="Deploy your own software factory with Big Bang"
            logoCardUrl="/products/big-bang/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12 v-if="!ignorePartyBus">
          <LogoCard
            :logoSource="pbLogo"
            class="serviceHeight"
            logoCardText="Get hands-on experience onboarding with Party Bus"
            logoCardUrl="/products/party-bus"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12 v-if="!ignoreCNAP">
          <LogoCard
            :logoSvg="cnapLogo"
            class="serviceHeight"
            logoCardText="Provide access to development, testing, and production enclaves"
            logoCardUrl="/products/cnap/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="csLogo"
            class="serviceHeight"
            logoCardText="Stay secured with our Cybersecurity team processes"
            logoCardUrl="/products/cybersecurity"
          />
        </v-flex>
        <!-- <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource=""
            logoCardText="Stay secured with our Cybersecurity team processes"
          />
        </v-flex> 
        -->
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import LogoCard from "@/components/Base/LogoCard";
import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.png";
import PBLogo from "@/assets/images/logos/P1_Party_Bus_Logo.png";
import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_Black_text.png";
import CNAPlogo from "@/assets/images/logos/CNAP_logo.svg";
import CSLogo from "@/assets/images/logos/CyberSecLogo.png";

export default {
  name: "ServicesSummary",
  components: {
    LogoCard
  },
  props: {
    ignoreIronBank: {
      type: Boolean,
      default: false
    },
    ignoreBigBang: {
      type: Boolean,
      default: false
    },
    ignorePartyBus: {
      type: Boolean,
      default: false
    },
    ignoreCNAP: {
      type: Boolean,
      default: false
    },
    ignoreCyberSec: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ibLogo: IBLogo,
      pbLogo: PBLogo,
      bbLogo: BBLogo,
      cnapLogo: CNAPlogo,
      csLogo: CSLogo
    };
  }
};
</script>
<style lang="scss" scoped>
.services-summary {
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .service-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1rem;

    a {
      .btn-link {
        word-wrap: none;
      }
    }

    h4 {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    @include xs {
      align-items: flex-start;
      text-align: left;
      h4 {
        margin-left: 0;
        padding-left: 0;
      }
    }
  }
}
@media screen and (max-width: 1904px) {
  .serviceHeight {
    height: 280px;
  }
}

@media screen and (max-width: 1264px) {
  .serviceHeight {
    height: 260px;
  }
}

@media screen and (max-width: 960px) {
  .serviceHeight {
    height: 240px;
  }
}
</style>