// Переменные для брейкпоинтов
$breakpoint-320: 320px;
$breakpoint-375: 375px;
$breakpoint-425: 425px;
$breakpoint-768: 768px;
$breakpoint-1024: 1024px;
$breakpoint-1200: 1200px;
$breakpoint-1440: 1440px;
$breakpoint-1920: 1920px;

// Переменные цветов (добавьте если нет)
$c-black: #000000;
$c-white: #ffffff;
$c-green: #3a9966;
$c-primary: #b22ac9; // фиолетовый цвет для кнопки

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 100dvh;

  header,
  footer,
  main {
    position: relative;
    z-index: 2;
  }

  header,
  footer {
    flex: 0 0 auto;
  }

  main {
    flex: 1 0 auto;
  }
}

.container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0 12px;
}

// 320px и выше
@media (min-width: 320px) {
  .container {
    max-width: 320px;
    padding: 0 15px;
  }
}

// 375px и выше
@media (min-width: $breakpoint-375) {
  .container {
    max-width: 375px;
  }
}

// 425px и выше
@media (min-width: $breakpoint-425) {
  .container {
    max-width: 400px;
    padding: 0 18px;
  }
}

// 768px и выше
@media (min-width: $breakpoint-768) {
  .container {
    max-width: 768px;
    padding: 0 24px;
  }
}

// 1024px и выше
@media (min-width: $breakpoint-1024) {
  .container {
    max-width: 1024px;
    padding: 0 32px;
  }
}