[data-component-id="amphibios:card"] {
  /* @todo Add your styles here. */
  .medical-card {
    padding: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    * {
      color: var(--amphibios-dark-blue);
    }

  }
  .medical-card.yellow_bg {
    background-color: var(--amphibios-yellow);
    border: none;
    outline: 16px solid var(--amphibios-dark-blue);
    outline-offset: -8px;
    color: var(--amphibios-dark-blue);
  }

  .medical-card.white_bg {
    background-color: var(--amphibios-white);
    border: none;
    outline: 16px dotted var(--amphibios-dark-blue);
    outline-offset: -8px;
    color: var(--amphibios-dark-blue);
  }

  .medical-card {
    .read-more-section {
      text-align: right;
    }
    .read-more {
      color: var(--amphibios-blue)!important;
      width: 150px;
      display: block;
      float: right;
      text-decoration: none;
      font-family: "OpenSans-Bold", sans-serif;
      margin-right: 50px;
      &:hover, &:visited {
        color: var(--amphibios-blue);
      }
    }
    .read-more:before {
      content: " ";
      background-image: url("../../images/read-more-blue.png");
      display: block;
      width: 50px;
      height: 40px;
      position: relative;
      top: 30px;
      left: 6px;
    }
    .read-more:after {
      content: " ";
      background-image: url("../../images/read-more-blue-oposite.png");
      display: block;
      width: 50px;
      height: 40px;
      position: relative;
      top: -32px;
      right: -160px;
    }
  }
}