a.portfolio-card {
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-main-border));
  overflow: hidden;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: rgb(var(--color-main-surface));
  transition: 0.3s;
}
a.portfolio-card:hover {
  border-color: rgb(var(--color-main-accent));
}
img.portfolio-card__image {
  height: 300px;
  object-fit: cover;
}
span.portfolio-card__service-title {
  padding-top: 1.5rem;
  padding-inline: 2rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: bold;
  color: rgb(var(--color-main-text));
}
h5.portfolio-card__title {
  padding-inline: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: bold;
  color: rgb(var(--color-main-text));
}
p.portfolio-card__description {
  padding-inline: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-main-muted));
}
ul.portfolio-card__tags {
  padding-inline: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ul.portfolio-card__tags li {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(var(--color-main-accent));
  background-color: rgba(var(--color-main-accent) / 0.1);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}