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

:root {
  --font: 'Poppins', sans-serif;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --white-1: #fcfcfc;
  --white-2: #f5f5f5;
  --white-3: #e8e8e8;
  --white-4: #cccccc;
  --grey-1: #707070;
  --grey-2: #4a4a4a;
  --black-1: #1d1d1d;
  --red-1: #e5383b;
}

html {
  font-family: var(--font);
  font-size: var(--fs-16);
  color: var(--black-1);
  overflow: hidden;
  background: var(--white-2);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  display: grid;
  grid-template-columns: min(300px, 25%) minmax(50%, 1fr) min(300px, 25%);
  height: calc(100vh - 50px);
  width: 100vw;
}