.flex-item {
    flex: 1 1 10%;
    max-width: 10%;
}

.img-cover-s {
            height: 100px;
            object-fit: cover;
            border-radius: .5rem;
            display: block;
            margin: auto;
}

.img-cover-w {
            width: 100%;
            object-fit: cover;
            border-radius: .5rem;
            display: flex;
            align-self: center;
            margin: auto;
}

.btn-fx{
  --c1: #689A94;
  --c2: #99E6DD;
  --txt: #ffffff;
  --txt-hover: #ffc100;

  position: relative;
  border: none;                 /* keep Bootstrap look minimal */
  color: var(--txt) !important;
  background-color: var(--c1);
  background-image: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c1) 40%,
    var(--c2) 100%
  );
  background-repeat: no-repeat;
  padding: 3rem 2rem;
  border-radius: .5rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
  transform: translateZ(0);     /* better GPU rendering */
  transition:
    transform 1.0s ease,
    color 1.0s ease,
    box-shadow 1.0s ease,
    filter 1.0s ease !important;
}

.btn-fx:hover{
  transform: scale(1.10);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.2);
}

.btn-fx.gold{
  --c1: #ffc100;
  --c2: #ffe000;
  --txt: #ffffff;

  color: var(--txt) !important;
  background-color: var(--c1);
  background-image: linear-gradient(
    90deg,
    var(--c1) 0%,
    var(--c1) 40%,
    var(--c2) 100%
  );
  background-repeat: no-repeat;
}