:root {
  color-scheme: light;
  --ink: #151515;
  --paper: #f7f3ec;
  --line: #ded7ca;
  --gold: #b78a2f;
  --red: #9f1d2a;
  --teal: #12615b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
}

.image-mask::after {
  background:
    linear-gradient(90deg, rgba(14, 13, 11, 0.82), rgba(14, 13, 11, 0.52) 42%, rgba(14, 13, 11, 0.16)),
    linear-gradient(0deg, rgba(14, 13, 11, 0.5), transparent 45%);
  content: "";
  inset: 0;
  position: absolute;
}

.rental-card-image {
  aspect-ratio: 16 / 9;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.focus-ring:focus {
  outline: 3px solid rgba(183, 138, 47, 0.45);
  outline-offset: 3px;
}