.view-products .view-content,
.view-applications .view-content,
.apicProductApiList .view-content ,
.apicProduct .apicPlans,
.route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicSubscribeAppsList,
.route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicNewAppsList,
.route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicSubscribeAppsList,
.route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicNewAppsList ,
.route-ibm-apimsubscription-wizardstep .apicMainContent .apicSubscribeAppsList,
.route-ibm-apimsubscription-wizardstep .apicMainContent .apicNewAppsList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

@media screen and (max-width: 1136px) {
  .view-products .view-content,
  .view-applications .view-content,
  .apicProductApiList .view-content,
  .apicProduct .apicPlans,
  .route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicNewAppsList,
  .route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicNewAppsList,
  .route-ibm-apimsubscription-wizardstep .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardstep .apicMainContent .apicNewAppsList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px ) {
  .view-products .view-content,
  .view-applications .view-content,
  .apicProductApiList .view-content,
  .apicProduct .apicPlans,
  .route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardnoplan .apicMainContent .apicNewAppsList,
  .route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardnoplanstep .apicMainContent .apicNewAppsList,
  .route-ibm-apimsubscription-wizardstep .apicMainContent .apicSubscribeAppsList,
  .route-ibm-apimsubscription-wizardstep .apicMainContent .apicNewAppsList {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.bx--card,
.node--type-product.bx--card,
.node--type-application.bx--card {
  width: 100%;
  max-width: unset;
  min-width: unset;
  height: 100%;
  min-height: 16rem;
  max-height: unset;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #FFFFFF;
  border: 1px solid #E1DFDD;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.bx--card .apicCard {
  display: flex;
  flex-direction: column;
  padding: 1rem 0rem;
  width: 100%;
  text-align: left;
  gap: 1rem;
  max-height: unset;
  font-family: "Volvo Novum", system-ui;
}

.bx--card .apicCard .apicCardMain,
.bx--card .apicCard .apicCardDesc,
.bx--card .apicCard .apicCardApis,
.bx--card .apicCard .apicCardTags,
.bx--card .apicCard .apicCardRating {
  padding-inline: 1rem;
}

.bx--card .apicCard .apicCardMain {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.2rem;
}

.bx--card .apicCard .apicCardTitle {
  display: inline-block;
  overflow-wrap: anywhere;
}

.bx--card .apicCard .apicCardVersion {
  display: inline-block;
}

.bx--card .apicCard .field--label {
  display: none;
}

.bx--card .apicCard .apicCardIcon {
  border: unset;
}

.bx--card .apicCard .bx--about__icon img {
  border: unset;
}

.bx--card .apicCard .apicApiCount {
  border: unset;
  margin: unset;
  padding: unset;
  font-size: unset;
  line-height: unset;
}

.bx--card .apicCard .apicCardTags .field--items {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bx--card .apicCard .apicCardTags {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bx--card .apicCard .applicationType {
  margin: 0;
}

.bx--card .apicCard .apicAppStatus::before {
  content: none;
}

.bx--card .apicCard .apicAppStatus,
.bx--card .apicCard .applicationType,
.bx--card .apicCard .apicCardTags .field--item {
  display: block;
  width: unset;
  height: unset;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  color: #ffffff;
}

.bx--card .apicCard .apicAppStatus:nth-of-type(3n + 1),
.bx--card .apicCard .applicationType:nth-of-type(3n + 1),
.bx--card .apicCard .apicCardTags .field--item:nth-of-type(3n + 1) {
  background: #50A294;
}

.bx--card .apicCard .apicAppStatus:nth-of-type(3n + 2),
.bx--card .apicCard .applicationType:nth-of-type(3n + 2),
.bx--card .apicCard .apicCardTags .field--item:nth-of-type(3n + 2) {
  background: #66B3A6;
}

.bx--card .apicCard .apicAppStatus:nth-of-type(3n + 3),
.bx--card .apicCard .applicationType:nth-of-type(3n + 3),
.bx--card .apicCard .apicCardTags .field--item:nth-of-type(3n + 3) {
  background: #396976;
}

.bx--card .apicCard .apicAppStatus > a,
.bx--card .apicCard .applicationType > a,
.bx--card .apicCard .apicCardTags .field--item > a {
  color: #ffffff;
}

.bx--card .apicCard .apicAppStatus,
.bx--card .apicCard .applicationType,
.bx--card .apicCard .apicCardTags .apicCardProtocol .field--item {
  background-color: #396976;
}

.bx--card .apicAppStatus.enabled,
.bx--card .apicCard .apicCardTags .apicCardState.online .field--item {
  background-color: #78B833;
}

.bx--card .apicAppStatus.disabled,
.bx--card .apicCard .apicCardTags .apicCardState .field--item {
  background-color: gray;
}

.bx--card .field--name-apic-description h3 {
  display: none;
}