@font-face {
  font-family: "Alla Namn Roboto";
  src: url("assets/roboto.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Abril Fatface";
  src: url("assets/abril-fatface.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --names-background: #f4f4f4;
  --names-policy-background: #f7f7f7;
  --names-heading: #353535;
  --names-text: #7a7a7a;
  --names-link: #2d2d2d;
}

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

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--names-background);
  color: var(--names-text);
  font-family: "Alla Namn Roboto", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--names-link);
  text-decoration: none;
}

.names-width {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.names-gallery {
  min-height: 580px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
}

.names-gallery img {
  display: block;
  width: 270px;
  height: auto;
}

.names-heading-section {
  padding-block: 10px;
}

.names-heading {
  margin: 0 auto;
  color: var(--names-heading);
  font-family: "Abril Fatface", Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.names-heading span {
  display: block;
}

.store-section {
  height: 95px;
  display: grid;
  place-items: center;
}

.store-section img {
  display: block;
  width: 224px;
  height: auto;
}

.names-copy {
  padding-block: 10px;
}

.names-copy p,
.names-links p {
  margin: 0;
}

.names-links {
  padding-top: 10px;
  padding-bottom: 80px;
}

.names-policy {
  background: var(--names-policy-background);
}

.names-policy-main {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
  padding-top: 10px;
  padding-bottom: 210px;
}

.names-policy h1 {
  margin: 0 0 20px;
  color: #2d2d2d;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}

.names-policy h1 span {
  display: block;
}

.names-policy p {
  margin: 0;
}

.names-policy .break-line {
  display: block;
}

.names-policy .provider-link {
  display: block;
}

@media (max-width: 720px) {
  body {
    font-size: 17px;
    line-height: 1.65;
  }

  .names-gallery {
    min-height: auto;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 24px;
  }

  .names-gallery img {
    width: min(44vw, 270px);
  }

  .names-heading-section {
    padding-block: 18px;
  }

  .names-heading {
    font-size: clamp(25px, 7.5vw, 32px);
    line-height: 1.35;
  }

  .store-section {
    height: 88px;
  }

  .store-section img {
    width: 200px;
  }

  .names-copy,
  .names-links {
    padding-inline: 0;
  }

  .names-copy p + p,
  .names-links p + p {
    margin-top: 12px;
  }

  .names-policy-main {
    padding-top: 28px;
    padding-bottom: 80px;
  }

  .names-policy h1 {
    margin-bottom: 28px;
    font-size: clamp(38px, 12vw, 48px);
    line-height: 1.05;
  }

  .names-policy p + p {
    margin-top: 12px;
  }
}