ServicesSummary.vue

import CyberSecLogo from '../assets/images/logos/CyberSecLogo.webp';
<template>
  <div class="services-summary">
    <v-container fluid>
      <v-layout row wrap justify-center name="services-summary">
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="ibLogo"
            class="serviceHeight"
            logoCardText="Download DoD-wide approved containers or harden with Iron Bank"
            logoCardUrl="/products/iron-bank"
            data-cy="ib"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="bbLogo"
            class="serviceHeight"
            logoCardText="Deploy your own software factory with Big Bang"
            logoCardUrl="/products/big-bang"
            data-cy="bb"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="pbLogo"
            class="serviceHeight"
            logoCardText="Get hands-on experience onboarding with Party Bus"
            logoCardUrl="/products/party-bus"
            data-cy="pb"
          />
        </v-flex>
        <v-flex lg2 md3 sm6 xs12>
          <LogoCard
            :logoSource="cnapLogo"
            :logoMaxWidth="100"
            class="serviceHeight"
            logoCardText="Provide access to development, testing, and production enclaves"
            logoCardUrl="/products/cnap"
            data-cy="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"
            data-cy="cyber"
          />
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import LogoCard from "@/components/Base/LogoCard.vue";
import IBLogo from "@/assets/images/logos/Iron_Bank_Logo_LIGHT.webp";
import PBLogo from "@/assets/images/logos/P1_Party_Bus_Logo.webp";
import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_Black_text.webp";
import CNAPlogo from "@/assets/images/logos/CNAP_logo.webp";
import CSLogo from "@/assets/images/logos/CyberSecLogo.webp";

export default {
  name: "ServicesSummary",
  components: {
    LogoCard,
  },
  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>