@font-face {
  font-display: swap;
  font-family: Inter;
  font-weight: 700;
  src: url(../fonts/Inter-Bold.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-weight: 400;
  src: url(../fonts/Inter-Regular.woff2) format('woff2');
}
@font-face {
  font-display: swap;
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/Inter-Regular-Italic.woff2) format('woff2');
}
:root {
  --color-white-1: #fff;
  --color-white-2: #ffffffcc;
  --color-black-1: #000;
  --color-grey-1: #343539;
  --color-grey-2: #979797;
  --color-grey-3: #4b4b4f;
  --color-grey-4: #cfcfcf;
  --color-grey-5: #f8f8f8;
  --color-red-1: #ef483e;
  --color-red-2: #e04e45;
  --color-red-3: #fcdad8;
  --header-h: 112px;
  --transition-d-1: 0.1s;
}
html {
  background-color: var(--color-grey-1);
  color: var(--color-white-1);
  font-family: Inter, sans-serif;
  scroll-behavior: smooth;
}
body {
  margin: unset;
}
main {
  margin: 80px 0;
}
a {
  color: var(--color-white-1);
  text-decoration: none;
}

.wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1380px;
  padding: 0 24px;
}

.header {
  background-color: var(--color-grey-1);
  box-shadow: 0 1px #2b2c2f;
  box-sizing: border-box;
  height: var(--header-h);
  padding: 36px 0;
}
.header__container {
  align-items: center;
  display: flex;
  gap: 86px;
}
.header__logo img {
  display: block;
}
.header__nav ul {
  display: flex;
  gap: 16px;
  list-style-type: none;
  margin: unset;
}
.header__nav a {
  font-size: 15px;
  transition: color var(--transition-d-1);
}
.header__nav a:hover {
  color: var(--color-white-2);
}

.footer {
  background-color: var(--color-grey-1);
  box-sizing: border-box;
  padding: 76px 0;
}
.footer__container {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.footer__info {
  gap: 46px;
}
.footer__copy,
.footer__info {
  display: flex;
  flex-direction: column;
}
.footer__copy {
  gap: 14px;
}
.footer__copy small {
  color: var(--color-grey-2);
}
.footer__logo img {
  display: block;
}
.footer__links {
  display: flex;
  gap: 126px;
}
.footer__links a {
  font-size: 15px;
  transition: color var(--transition-d-1);
}
.footer__links a:hover {
  color: var(--color-white-2);
}