/* Phase 9C extracted cards visual CSS. */

.company-card {
  border-radius: var(--border-radius--br-5);
  transform-style: preserve-3d;
  flex-flow: column;
  text-decoration: none;
  transition-property: transform;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 -4px 5px #007d720d, inset 0 3px 10px #ffffff80;
}

.company-card:hover {
  transform: scale3d(.98, .98, 1.001);
}

.company-card-content {
  padding: var(--sizes--size-64) var(--sizes--size-64) var(--sizes--size-48);
  flex-flow: column;
  flex: 1;
  display: flex;
}

.cta-card {
  padding-top: var(--section-pd--mbl);
  padding-bottom: var(--section-pd--mbl);
  border-radius: var(--border-radius--br-5);
  background-color: var(--colors--primary--700);
}

.giving-back-card {
  padding: var(--sizes--size-16) var(--sizes--size-24);
  grid-column-gap: var(--sizes--size-16);
  grid-row-gap: var(--sizes--size-16);
  border: 1px solid var(--colors--neutral--200);
  border-radius: var(--sizes--size-16);
  background-color: var(--colors--neutral--white);
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 7px 8px #0c0f610a;
}

.card {
  border: 1px solid var(--colors--neutral--200);
  border-radius: var(--border-radius--br-5);
  background-color: var(--colors--neutral--white);
}

.card._3-items-card {
  padding-top: var(--sizes--size-32);
  padding-right: var(--sizes--size-32);
  padding-bottom: var(--sizes--size-32);
  padding-left: var(--sizes--size-32);
  border-top-left-radius: var(--border-radius--br-3);
  border-top-right-radius: var(--border-radius--br-3);
  border-bottom-left-radius: var(--border-radius--br-3);
  border-bottom-right-radius: var(--border-radius--br-3);
  width: calc(33.3333% - 16px);
}

.card.message-card {
  padding: var(--sizes--size-32);
  grid-column-gap: var(--sizes--size-20);
  grid-row-gap: var(--sizes--size-20);
  background-color: var(--colors--primary--100);
  border-style: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.card.top-image-card {
  padding: var(--sizes--size-12) var(--sizes--size-12) var(--sizes--size-24);
  border-radius: var(--border-radius--br-3);
}

.card-icon {
  max-width: 56px;
}

.card-bottom-pd {
  margin-top: var(--sizes--size-24);
  padding-right: var(--sizes--size-08);
  padding-left: var(--sizes--size-08);
}

@media screen and (max-width: 991px) {
  .company-card-content {
      padding: var(--sizes--size-48) var(--sizes--size-32) var(--sizes--size-32);
    }
}

@media screen and (max-width: 767px) {
  .company-card {
      border-radius: var(--border-radius--br-4);
    }
  
    .company-card-content {
      padding: var(--sizes--size-32) var(--sizes--size-24) var(--sizes--size-24);
    }
  
    .cta-card {
      padding-top: var(--section-pd--mbp);
      padding-bottom: var(--section-pd--mbp);
      border-radius: var(--border-radius--br-4);
    }
  
    .card {
      border-radius: var(--border-radius--br-4);
    }
  
    .card._3-items-card {
      padding-top: var(--sizes--size-24);
      padding-right: var(--sizes--size-24);
      padding-bottom: var(--sizes--size-24);
      padding-left: var(--sizes--size-24);
      width: calc(50% - var(--sizes--size-08));
    }
  
    .card.message-card {
      padding: var(--sizes--size-24);
    }
  
    .card-icon {
      max-width: 48px;
    }
  
    .card-bottom-pd {
      margin-top: var(--sizes--size-16);
    }
}

@media screen and (max-width: 479px) {
  .company-card {
      border-radius: var(--border-radius--br-3);
    }
  
    .cta-card {
      border-radius: var(--border-radius--br-3);
    }
  
    .card {
      border-radius: var(--border-radius--br-3);
    }
  
    .card._3-items-card {
      width: 100%;
    }
  
    .card.message-card {
      grid-column-gap: var(--sizes--size-16);
      grid-row-gap: var(--sizes--size-16);
      flex-flow: column;
    }
}