ServicesSummary.vue

<template>
  <div class="services-summary mt-8">
    <v-container fluid>
      <v-layout row wrap justify-center name="services-summary">
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="ibLogo"
            logoCardText="Download DoD-wide approved containers or harden with Iron Bank"
            logoCardUrl="/products/iron-bank/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="pbLogo"
            logoCardText="Get hands-on experience onboarding with ABMS ADCE Party Bus"
            logoCardUrl="/products/abms-adce/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="bbLogo"
            logoCardText="Deploy your own software factory with Big Bang"
            logoCardUrl="/products/big-bang/"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSvg="cnapLogo"
            logoCardText="Provide access to development, testing and production enclaves"
            logoCardUrl="/products/cnap/"
          />
        </v-flex>
        <!-- REMAINING FOR: Enterprise Collaboration and Cyber Security
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource=""
            logoCardText="Enterprise Collaboration tools and solutions for your team"
          />
        </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/Party_Bus_logo_low_res-01.png";
import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_Black_text.png";
import CNAPlogo from "@/assets/images/logos/CNAP_logo.svg";

export default {
  name: "ServicesSummary",
  components: {
    LogoCard,
  },
  data() {
    return {
      ibLogo: IBLogo,
      pbLogo: PBLogo,
      bbLogo: BBLogo,
      cnapLogo: CNAPlogo,
    };
  },
};
</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;
      }
    }
  }
}
</style>