.my-card {
	margin: 2rem auto;
  @media only screen and (max-width: 767px) {
    // The card should take the full width of the screen in case
    // of a mobile phone
    margin: 2rem -2rem !important;
  }
	border-radius: 5px;
	background: white;

  .thumbnail-container {
    padding: 0;
    .thumbnail {
      height: 25rem;
      object-fit: cover;
      background: black;
    }
  }

	.image-bottom-border {
		width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
	}

	.avatar {
		width: 100%;
    border: 2px solid #E78B90;
    height: auto;
		background: rgb(250, 250, 250);
    margin-right: -1.5rem;
	}

	.content {
		padding: 1rem 1rem;
	}

	h3 {
		font-weight: 400;
		margin-bottom: 5px;
	}

	p {
		font-size: 1.1rem;
	}

	.icon-group {
    margin: -1rem auto -1rem;
		text-align: center;
		.icon {
			color: #aaa;
      cursor: pointer;
		}
	}

	.active {
		color: #E78B90;
	}

	.tags a {
		margin-bottom: 5px;
    background: #E78B90;
    color: white;
	}

	.follow-ribbon {
		position: absolute;
    top: 2.8rem;
    right: 1rem;
		cursor: pointer;
		z-index: 1;
		opacity: 0.9;
	}
}

.user-name {
  color: #827B7B;
  // font-family: 'Helvetica Neue' !important;
  // font-weight: 400;
  text-transform: capitalize;
  margin-bottom: 0;
  
  small {
    color: rgba(128, 128, 128, 0.61);
    // font-family: 'Helvetica Neue' !important;
    // font-weight: 400;
  }

  a{
    color: gray;
    font-size: 1rem;
  }
}

.postedAt {
  color: #827B7B;
  font-size: 0.9rem !important;
}

.follow-button {
  &.active {
    background: #E78B90;
    color: white !important;
    border: none;
    &:hover {
      background: #E78B90;
      color: white !important;
      border: none;
    }
  }
  &.inactive {
    background: white !important;
    color: #E78B90 !important;
    border: 1px solid #E78B90;
  }
}

.trip-status {
  margin: -0.5rem auto -1rem;
  color: #94989A;
  .right {
    float: right;
  }
}

.more-options {
  .menu {
    left: -300%;
  }
}