:root {
--bg-color: #fafafa;
--bg-color-2: #f7f7f7;
--copy-color: #1f1f1f;
--white: #fff;
--wabi-logo-color: #6f5756;
--copy-shadow: #fff9;
--gap: 32px;
--page-width: 1200px;
--green: #27ba45;
--red: #d2360e;
--blue: #1adfff;
--golden: #eda96c;
--yellow: #fefd20;

--vivid-orange: #fcdc7c;
--video-bg: linear-gradient(to bottom, #fff, #e1e1e1);
}

@media (max-width: 600px) {
:root {
    --gap: 16px;
}
}

html {
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "slnt" 0;
font-family: "Poppins", sans-serif;
background-color: var(--bg-color);
color: var(--copy-color);
font-size: 100%;
}

html,
body,
h1 {
padding: 0;
margin: 0;
}

body {
overflow-x: hidden;
font-size: 1rem;
line-height: 1.6;
}

h1,
h2 {
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-variation-settings: "slnt" 0;
font-family: "Poppins", sans-serif;
}

h2 {
margin: var(--gap) 0;
font-size: 1.5rem;
text-transform: uppercase;
line-height: 1.4;
}

.button {
  padding: var(--gap) 0;
  display: flex;
  justify-content: start;
  position: relative;

  img {
    width: 32px;
    transition: 0.3s;
  }

  &:hover img {
    transform: rotate(-15deg);
  }
}
.button.center {
  justify-content: center;
}

.button a {
  text-decoration: none;
  display: inline-flex;
  letter-spacing: 2px;
  gap: 16px;
  align-items: center;
  padding: 8px 20px;
  background: var(--red);
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  text-wrap: balance;

  &:active {
    transform: translate(2px, 2px);
  }
}

@media (max-width: 768px) {
  .button a {
      letter-spacing: initial;
  }
}

.blocks {
  --max-width: min(var(--page-width), 100vw);
  display: flex;
  gap: var(--gap);
  font-weight: 600;
  text-align: center;
  max-width: min(calc(var(--max-width) * 0.8), 100vw);
  margin: calc(var(--gap) * 2) auto;
  align-items: center;
  justify-content: center;
}

.blocks figcaption {
  padding: 8px;
  display: block;
}

.blocks figure {
  display: block;
  padding: var(--gap);
  margin: 0;
}

.blocks div {
  max-width: calc(var(--max-width) / 3 - 16px);
}

.blocks img {
  max-width: 100%;
}