@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-symbols.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}

@font-face {
  font-family: "family";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("fonts/family-regular.woff2") format("woff2");
}

@font-face {
  font-family: "family";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("fonts/family-bold.woff2") format("woff2");
}

@font-face {
  font-family: "family";
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  src: url("fonts/family-heavy.woff2") format("woff2");
}

@font-face {
  font-family: "family Fallback";
  src: local("Arial");
  ascent-override: 104.86%;
  descent-override: 28.66%;
  line-gap-override: 0%;
  size-adjust: 90.03%;
}

:root {
  --rgb-black: 0, 0, 0;
  --rgb-blue: 0, 100, 230;
  --rgb-blue-light: 194, 246, 255;
  --rgb-white: 255, 255, 255;

  --color-blue: rgb(var(--rgb-blue));
  --color-blue-light: rgb(var(--rgb-blue-light));
  --color-white: rgb(var(--rgb-white));

  --font-family: "family", "family Fallback";
  --font-inter: "Inter", "Inter Fallback";
  --font-size: clamp(1.375rem, 2.225vw, 2rem);
  --letter-spacing: -0.0015em;
  --line-height: 1.3;
  --transition: 0.15s cubic-bezier(0.33, 1, 0.68, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-blue);
  color: var(--color-blue-light);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family), Georgia, serif;
  font-feature-settings: "liga", "dlig";
  font-size: var(--font-size);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin: 0;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(var(--rgb-blue-light), 0);
}

dl,
dd,
p {
  margin: 0;
}

a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.0625em;
}

strong {
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: normal;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-bottom: 3.075em;
  margin-inline: auto;
  max-width: 34.5em;
  padding-inline: 1.5em;
  width: 100%;
}

.main--index {
  margin-bottom: 3.55em;
  margin-top: 3.55em;
}

.links {
  display: grid;
  gap: 1.6em;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  width: 100%;
}

.product-link {
  border-radius: 0.4em;
  box-shadow: 0 0 0 1px rgba(var(--rgb-white), 0.2);
  display: block;
  max-width: 24em;
  padding: 1.6em;
  text-decoration: none;
  transition: box-shadow var(--transition);
  width: 100%;
}

.product-link dl {
  display: grid;
  gap: 0.575em;
  margin-bottom: -0.25em;
  margin-top: -0.3125em;
}

.product-link dt,
.product-link dd {
  letter-spacing: normal;
}

.product-link dt {
  align-items: flex-start;
  display: flex;
  font-size: 180%;
  font-weight: 800;
  line-height: 1;
}

.product-link dt strong {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 0.0425em;
  text-underline-offset: 0.0525em;
}

.product-link dd {
  font-size: 100%;
  font-weight: 500;
  line-height: 1.2;
}

.legal {
  display: flex;
  flex-direction: column;
  margin-bottom: 3.55em;
  margin-inline: auto;
  max-width: 34.5em;
  padding-inline: 1.5em;
  text-align: center;
  width: 100%;
}

.legal p {
  font-family: var(--font-inter), sans-serif;
  font-feature-settings: "liga", "dlig", "ss03";
  font-size: 50%;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: -0.325em;
  margin-top: 0.1em;
}

.legal p a,
.legal p b {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
}

.legal p .icon {
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
}

.legal br {
  display: none;
}

@media (hover: hover) {
  .product-link:focus,
  .product-link:hover {
    box-shadow: 0 0 0 1px var(--color-white);
  }

  .legal a:focus,
  .legal a:hover {
    text-decoration: underline;
  }
}

@media (min-width: 48em) {
  .legal span {
    display: inline-block;
  }
}

@media (min-width: 64em) {
  .main {
    padding-inline: 2em;
  }

  .links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-link {
    max-width: none;
  }

  .legal {
    padding-inline: 2em;
  }

  .legal p {
    font-size: 40%;
  }

  .legal br {
    display: inline;
  }
}