@font-face {
  font-family: '20Kopeek';
  src: url('fonts/20Kopeek.woff') format('woff');
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
  font-family: "20Kopeek", sans-serif, serif;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

* {
  --peatch-black: #000100;
  --peatch-white: #ffffff;
  --peatch-gray: #909092;
  --peatch-blue: #3F8AF7;
  --peatch-light-blue: #6AA6FD;
  --peatch-bg: #F7F6F0;
  --peatch-light-green: #DBFBD9;
  --peatch-stroke: #E7E7E5;

  --border-thin: 1px;
  
  --s: 1.5rem;
  --m: 2.5rem;
  --l: 3rem;
  --xl: 5rem;
  --xxl: 7rem;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;

  background-color: var(--peatch-bg);

  overflow-y: scroll;
  overflow-x: hidden;
}

main {
  background-color: var(--peatch-bg);

  height: 100%;

  overflow-y: scroll;
  overflow-x: hidden;
}

h2 {
  font-weight: 400;
  font-size: 50px;
  line-height: 55px;
  color: var(--peatch-black);

  margin-inline: 20px;

  max-inline-size: 27ch;
}

h3 {
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  color: var(--peatch-gray);

  margin-inline: 20px;

  max-inline-size: 40ch;
}

h4 {
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;

  color: var(--peatch-black);
}

p.peatch-gray {
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;

  color: var(--peatch-gray);
}

.stack {
  /* ↓ The flex context */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  /* ↓ Any extant vertical margins are removed */
  margin-block: 0;
}

.stack > * + * {
  /* ↓ Top margin is only applied to successive elements */
  margin-block-start: var(--space, 1.5rem);
}

.stack.inverted {
  background: var(--peatch-black);
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}

.centered-text {
  text-align: center;
}

.text-narrow {
  max-inline-size: 14ch;
}

h2.inverted {
  color: var(--peatch-white);
}

.reel {
  /* ↓ Custom properties for ease of adjustment */
  --space: 1rem;
  --color-light: #fff;
  --color-dark: #000;
  --reel-height: 370px;
  --item-width: 260px;
  width: 100%;

  margin: auto;
  padding-inline: 15px;

  display: flex;
  
  block-size: var(--reel-height);

  /* ↓ Overflow */
  overflow-x: auto;
  overflow-y: hidden;

  padding-bottom: 1rem;

  scrollbar-width: none;
}


.reel::-webkit-scrollbar {
  display: none
}

.reel > * {
  /*
  ↓ Just a `width` wouldn’t work because
  `flex-shrink: 1` (default) still applies
  */
  flex: 0 0 var(--item-width);
}

.reel > * + * {
  margin-inline-start: var(--space);
}

.reel > :first-child {
  margin-inline-start: auto;
}

.reel > :last-child {
  margin-inline-end: auto;
}
  

reel-l > img {
  /* ↓ Reset for images */
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.with-top-margin-s {
  margin-block-start: var(--s);
}

.with-top-margin-m {
  margin-block-start: var(--m);
}

.with-top-margin-l {
  margin-block-start: var(--l);
}

.with-top-margin-xl {
  margin-block-start: var(--xl);
}

.with-top-margin-xxl {
  margin-block-start: var(--xxl);
}

.with-vert-margin-l {
  margin-block: var(--l);
}

.with-vert-margin-xxl {
  margin-block: var(--xxl);
}

.with-vert-padding-xxl {
  padding-block: var(--xxl);
}

.box {
  /* ↓ Padding set to the first point on the modular scale */
  padding: var(--s1);
  /* ↓ Assumes you have a --border-thin var */
  border: var(--border-thin) solid;
  /* ↓ Always apply the transparent outline, for high contrast mode */
  outline: var(--border-thin) transparent;
  outline-offset: calc(var(--border-thin) * -1);
  color: var(--color-dark);
  background-color: var(--peatch-white);
}

.card {
  height: 370px;
  width: 260px;

  padding: 30px 25px;

  border-radius: 30px;
  /* ↓ Always apply the transparent outline, for high contrast mode */
  outline: var(--border-thin) transparent;
  outline-offset: calc(var(--border-thin) * -1);

  background-color: var(--peatch-white);
}

.peatch-logo {
  height: 50px;
}

.tg-button {
  border: none;
  border-radius: 12px;
  color: var(--peatch-white);
  background-color: var(--peatch-blue);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  gap: 40px;

  padding: 10px 20px;

  cursor: pointer;
  transition: 0.3s;

  margin-top: 2.5em;

  text-decoration: none;
}

.tg-button:hover {
  background-color: var(--peatch-light-blue);
}

.tag {
  background-color: var(--peatch-white);

  border-radius: 12px;

  padding: 2px 10px;
}

.tag-grid1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;

  align-items: center;
  justify-items: center;

  width: 100%;
  min-width: 750px;
}

.tag-grid2 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 0px;

  align-items: center;
  justify-items: center;

  width: 100%;
  min-width: 750px;
}

.tag-grid1 .tag1 {  grid-area: 4 / 1 / 5 / 2; }
.tag-grid1 .tag2 {  grid-area: 2 / 2 / 3 / 3; }
.tag-grid1 .tag3 {  grid-area: 3 / 3 / 4 / 4; }
.tag-grid1 .tag4 {  grid-area: 1 / 3 / 2 / 5; }
.tag-grid1 .tag5 {  grid-area: 2 / 4 / 3 / 7; }
.tag-grid1 .tag6 {  grid-area: 4 / 7 / 5 / 8; }
.tag-grid1 .tag7 {  grid-area: 2 / 7 / 3 / 9; }
.tag-grid1 .tag8 {  grid-area: 3 / 9 / 3 / 10; }
.tag-grid1 .tag9 {  grid-area: 1 / 7 / 2 / 8; }
.tag-grid1 .tag10 {  grid-area: 1 / 10 / 2 / 11; }
 
.tag-grid2 .tag1 {  grid-area: 3 / 1 / 4 / 2; }
.tag-grid2 .tag2 {  grid-area: 4 / 2 / 5 / 3; }
.tag-grid2 .tag3 {  grid-area: 2 / 3 / 3 / 4; }
.tag-grid2 .tag4 {  grid-area: 3 / 4 / 4 / 5; }
.tag-grid2 .tag5 {  grid-area: 2 / 5 / 3 / 7; }
.tag-grid2 .tag6 {  grid-area: 4 / 6 / 5 / 7; }
.tag-grid2 .tag7 {  grid-area: 1 / 7 / 2 / 8; }
.tag-grid2 .tag8 {  grid-area: 4 / 8 / 5 / 9; }
.tag-grid2 .tag9 {  grid-area: 2 / 9 / 3 / 10; }
.tag-grid2 .tag10 {  grid-area: 5 / 9 / 7 / 10; }

#footer h3 {
  max-inline-size: 30ch;
}

@media (max-width: 500px) {
  * {
    --xxl: 6.5rem
  }

  h2 {
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 0em;
  }

  h2.centered-text {
    margin-inline: 20px;
    max-inline-size: 20ch;
  }

  h3.centered-text {
    margin-inline: 20px;
  }

  h3 {
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0em;
  }

  h4 {
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0em;
  }

  p.peatch-gray {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0em;

    margin-block-start: 0.5rem;
  }

  h2.inverted {
    max-inline-size: 15ch;
  }

  h3.inverted {
    max-inline-size: 25ch;
  }

  .reel {
    --item-width: 200px;
    --reel-height: 300px;
  }

  .with-top-margin-xl {
    margin-block-start: var(--l);
  }

  .with-vert-margin-xxl {
    margin-block: var(--xl);
  }

  .card {
    padding: 20px 20px;

    height: 300px;
  }

}