@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Jost:wght@400;500;600&display=swap&subset=cyrillic');
:root {
  --background-primary: #111922;
  --background-secondary: #1b2632;
  --background-brand: #3e566b;
  --background-transparent-primary: rgba(27, 38, 50, 0.6);
  --content-primary: #e5eaf0;
  --content-secondary: #a6b2bf;
  --content-brand: #c5cfda;
  --border-brand: #9fadbc;
  --border-secondary: #3b4a5a;
  --base-primary: #1b2632;
  --brand-accent: #9fadbc;
  --brand-add-accent: #dde4ec;
  --backround-primary: #111922;
  --backround-secondary: #1b2632;
}
body { font-family: "Jost", "Manrope", sans-serif; background-color: #111922; }
h1, h2, h3, .title, .title.title--1, .title.title--2, .title.title--3 {
  font-family: "Lora", "Prata", serif;
  letter-spacing: 0.01em;
}
.title.title--1 { text-transform: none; }
.btn, button.btn, a.btn { border-radius: 4px; letter-spacing: 0.05em; }

.header.fixed-top { background-image: linear-gradient(#111922 0%, rgba(17, 25, 34, 0.86) 70%, rgba(17, 25, 34, 0) 100%); }

.main-section { position: relative; }
.main-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 25, 34, 0.58) 0%, rgba(17, 25, 34, 0.28) 50%, rgba(17, 25, 34, 0.9) 100%); pointer-events: none; z-index: 1; }
.main-section > * { position: relative; z-index: 2; }

.btn.btn-primary { background-color: #c5cfda; border-color: #c5cfda; color: #111922; }
.btn.btn-primary:hover { background-color: #dde4ec; border-color: #dde4ec; color: #111922; }
.btn.btn-outline-secondary { background-color: transparent; border-color: #c5cfda; color: #e5eaf0; }
.btn.btn-secondary { color: #c5cfda; }

.catalog-card__price { background-color: #1b2632; color: #e5eaf0; border-top: 1px solid #9fadbc; }
.catalog-card { border-radius: 2px; }