.ServicesCards_ServiceCard {
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}
@media (max-width: 819px) {
  .ServicesCards_ServiceCard {
    flex-direction: column;
    height: 100%;
  }
}
.ServicesCards_ServiceCard_black {
  background-color: #1a1a1a;
  color: #fff;
}
.ServicesCards_ServiceCard_black-coal {
  background-color: #222;
  color: #fff;
}
.ServicesCards_ServiceCard_white {
  background-color: #f6f6f6;
  color: #000;
}
.ServicesCards_ServiceCard_smoke-white {
  background-color: #e5e5e5;
  color: #000;
}
.ServicesCards_ServiceCard_imagecontainer {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
@media (min-width: 820px) {
  .ServicesCards_ServiceCard_imagecontainer {
    padding: 0;
    height: auto;
    width: calc(var(--column-unit) * 2 - var(--grid-gap));
  }
}
.ServicesCards_ServiceCard_content {
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "icon title" "desc desc" "addDesc addDesc" "link link";
}
@media (min-width: 820px) {
  .ServicesCards_ServiceCard_content {
    flex: 1 1;
    grid-template-areas: "icon title" "icon desc" "icon addDesc" "icon link";
  }
}
.ServicesCards_ServiceCard_icon {
  font-size: 48px;
  grid-area: icon;
  margin-right: 16px;
}
.ServicesCards_ServiceCard_title {
  grid-area: title;
  align-self: center;
}
.ServicesCards_ServiceCard_description {
  grid-area: desc;
  margin-top: 12px;
}
.ServicesCards_ServiceCard_additionalDescription {
  grid-area: addDesc;
  margin-top: 12px;
  color: #707070;
}
.ServicesCards_ServiceCard_link {
  grid-area: link;
  margin-top: 16px;
}
@media (min-width: 820px) {
  .ServicesCards > :not(:last-child) {
    margin-bottom: 24px;
  }
}