.card.starter-site-card {
  padding: 0;
  max-width: 100%;
  &:hover, &:focus-within {
	.actions, .fav {
	  opacity: 1;
	}
  }
  .top {
	position: relative;
	overflow: hidden;
  }
  .fav {
	position: absolute;
	z-index: 2000;
	left: -15px;
	top: -30px;
	opacity: 0;
	transition: .3s ease;
	button {
	  padding: 30px 5px 30px 30px;
	  height: auto;
	  transform:rotate(45deg);
	  background-color: $purple;
	}
	svg {
	  transform: rotate(-45deg);
	  fill: #fff;
	  max-width: 15px;
	}
  }
  .actions {
	background-color: rgba(0,0,0,0.75);
	left:0;
	right:0;
	bottom: 0;
	top:0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	opacity: 0;
	transition: .3s ease;

	button {
	  background-color: $blue;
	  color: #fff;
	  font-weight: 600;
	  line-height: normal;
	  height: auto;
	  padding: 8px 15px;
	  transition: all .3s ease;
	  &:hover {
		box-shadow: none;
		background-color: darken($blue, 10);
	  }
	  &.preview {
		background-color: $light-blue;
		&:hover {
		  background-color: darken($light-blue, 10);
		}
	  }
	  &:last-child {
		margin-left: 10px;
	  }
	}
  }
  .image {
	max-height: 330px;
	background-color: transparentize($dark-grey, .75);
  }
  img {
	width: 100%;
	display:block;
  }
  .bottom {
	display: flex;
	align-items: center;
	padding: 15px 10px 15px 30px;
	border-top: 1px solid $grey;
	p {
	  font-size: 16px;
	  font-weight: 700;
	  color: $black;
	  margin: 0;
	}

	.pro-badge {
	  background-color: $success;
	  height: auto;
	  color: #fff;
	  font-weight: 600;
	  text-transform: uppercase;
	  padding: 5px 10px;
	  margin-left: auto;
	  border-radius: 999px;
	  line-height: normal;
	  display: flex;
	  align-items: center;
	  svg {
		margin-right: 3px;
	  }
	}
  }
}

@mixin ob-starter-site-card--tablet {
  .card.starter-site-card {
	max-width: 49%;
	&:not(:nth-child(2n)) {
	  margin-right: 2%;
	}
  }
}

@mixin ob-starter-site-card--laptop {
  .card.starter-site-card {
	max-width: 32%;
	&:not(:nth-child(2n)) {
	  margin-right: 0;
	}
	&:not(:nth-child(3n)) {
	  margin-right: 2%;
	}
  }
}