.card__container.row {
  gap: 12px;
}

.card__container.row > div:not(.col-12):not(.col-6):not(.col-4):not(.col-3) {
  flex: 1 1 calc(25% - 9px);
}

@media (max-width: 992px) {
  .card__container.row > div:not(.col-12):not(.col-6):not(.col-4):not(.col-3) {
    flex: 1 1 calc(50% - 6px);
  }
}

@media (max-width: 767px) {
  .card__container.row > div:not(.col-12):not(.col-6):not(.col-4):not(.col-3) {
    flex: 1 1 100%;
  }
}

.card__container {
  justify-content: center;
}

.card__container.row {
  margin-left: auto;
  margin-right: auto;
}

.card__basic {
  display: block;
  text-decoration: none;
  color: #222;
  text-align: center;
}

.card__basic:hover, .card__basic:active, .card__basic:focus {
  color: #222;
}

.card__basic:hover .card__basic__heading:after, .card__basic:active .card__basic__heading:after, .card__basic:focus .card__basic__heading:after {
  opacity: 0;
}

.card__basic:hover .card__basic__heading span, .card__basic:active .card__basic__heading span, .card__basic:focus .card__basic__heading span {
  opacity: 1;
}

.card__basic .card__basic__image__container {
  display: flex;
  align-items: center;
  height: 125px;
}

.card__basic picture {
  display: block;
  max-height: -webkit-fill-available;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.card__basic img {
  display: block;
  max-height: -webkit-fill-available;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.card__basic .card__basic__description {
  text-align: center;
}

.card__basic .card__basic__heading {
  color: #505050;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 1.05em;
  text-align: center;
  display: inline-block;
}

.card__basic .card__basic__heading:after {
  content: " ";
  display: block;
  position: relative;
  top: -4px;
  height: 0;
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 3px solid #222;
  opacity: 1;
  transition: opacity .5s;
}

.card__basic .card__basic__heading span {
  position: absolute;
  margin-top: 6px;
  margin-left: 8px;
  font-size: .675em;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .25s;
}