.card-directory {
  --padding-v: var(--padding-m);
  --padding-h: var(--padding-s);
}

.card-directory {
  outline: 0;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  border-radius: var(--border-radius);
  background-color: var(--black);
  color: var(--light-grey);
  display: block;
  font-size: var(--font-size-mid);
  padding: var(--padding-v) var(--padding-h);
  text-align: center;
}
/*BS*/
.card-directory:hover {
    color: var(--light-grey);
}

.__accessible .card-directory:focus {
  outline: 2px dashed !important;
}
.card-directory .title {
  font-family: var(--font-sans);
  font-weight: bold;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-bottom: var(--padding-xxs);
  text-transform: uppercase;
  font-size: var(--font-size-base);
}
.card-directory .text {
  margin-bottom: var(--padding-xs);
  font-size: var(--font-size-base);
}

.card-directory .icon {
  /*display: block;*/
  /*max-width: 90%;*/
  /*!*max-height: 6.875rem;*!*/
  /*margin: 0 auto var(--padding-m);*/
    display: block;
    width: 90%;
    height: 7rem;
    margin: 0 auto var(--padding-xs);
    position: relative;
    text-align: center;

}
.card-directory .icon svg,
.card-directory .icon img{ /*BS*/
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.card-directory .plus {
    display: block;
    margin-top: var(--padding-m);
}
.card-directory .plus svg, .card-directory .plus img {
    height: 2.5rem;
    width: 2.5rem;
    background: transparent;
}
.card-directory .plus svg .bg, .card-directory .plus img .bg {
    fill: var(--mapa-light);
}
.card-directory:hover .plus svg .bg, .card-directory:hover .plus img .bg {
    fill: var(--mapa);
}

@media (max-width: 480px) {
  .card-directory {
    font-size: var(--font-size-base);
      margin-bottom: var(--padding-xs);
  }
}
@media (min-width: 480px) {
  .card-directory {
    width: calc(33.3333333333% - var(--padding-m) / 3 * 2);
  }
}