main {
  padding: 0px 15px;
  width: min(100%, 1000px);
  margin: 0 auto;
}

.card {
  overflow: hidden;
  background: var(--background-second-dark);
  border-radius: var(--radius-md);
  position: relative;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);

  border-color: rgba(255,255,255,0.14);
}

.card a {
  color: var(--text-color-dark);
  text-decoration: none;
}

.card img {
  aspect-ratio: 16 / 9;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}

.card .tag {
  color: var(--text-color-dark);
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
}

.card-content {
  padding: 1rem;
}

.card h3 {
  margin-bottom: 0.75rem;

  font-size: 1.15rem;
}

.card p {
  margin-bottom: 1rem;

  font-size: 0.95rem;
}

.card .link {
  color: var(--text-color-dark);

  font-size: 0.9rem;
  font-weight: 700;
}