:root {
  --primary: #3CA091;
  --grey: #DCDCDC;
  --grey-darken-1: #BEBEBD;
  --background-secondary: #F1F0F0;
}

@font-face {
  font-family: "Pangram";
  src: local("PP Pangram Sans"),
  url("/static/ulekare/fonts/PangramSans/PPPangramSans-Medium.woff2") format("woff2"),
  url("/static/ulekare/fonts/PangramSans/PPPangramSans-Medium.woff") format("woff");
}

html {
  scroll-behavior: smooth;
}

body {
  background: #E1E2DD;
  margin: 0;
  padding: 0;
}

main.soulody {
  overflow-y: hidden;
  padding: 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px))
                      minmax(min-content, calc(100vh - 16px));
  grid-template-areas:
    "hero"
    "data"
    "circle"
    "community"
    "service"
    "references"
    "claims"
    "vision";
  row-gap: 8px;

  @media screen and (max-width: 930px) {
    padding: 0 4px 4px;
    grid-template-rows: minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px))
                        minmax(min-content, calc(100vh - 8px));
    row-gap: 4px;
  }
}

.soulody {
  * {
    margin: 0;
    padding: 0;
    font-family: "Pangram", "Sen", sans-serif;
    font-weight: 700;
    box-sizing: border-box;

    &.subtitle {
      font-size: 18px;
      line-height: 25.2px;

      @media screen and (max-width: 930px) {
        font-size: 14px;
        line-height: 19.6px;
      }
    }

    &.caption {
      font-size: 12px;
      line-height: 13.2px;
      letter-spacing: 0.96px;
      text-transform: uppercase;
    }
  }

  /* typography */

  p {
    font-size: 16px;
    line-height: 21px;

    @media screen and (max-width: 930px) {
      font-size: 14px;
      font-weight: 600;
    }

    &:not(:first-child) {
      margin-top: 16px;
    }
  }

  h1 {
    font-size: 96px;
    line-height: 96px;

    @media screen and (max-width: 930px) {
      font-size: 42px;
      line-height: 42px;
    }
    @media screen and (max-width: 300px) {
      font-size: 32px;
      line-height: 32px;
    }
  }

  h2 {
    font-size: 72px;
    line-height: 72px;

    @media screen and (max-width: 930px) {
      font-size: 32px;
      line-height: 32px;
    }
  }

  h3 {
    font-size: 48px;
    line-height: 48px;

    @media screen and (max-width: 930px) {
      font-size: 32px;
      line-height: 32px;
    }
  }

  .heading-3-4 {
    font-size: 24px;
    line-height: 28.8px;
  }

  .heading-3-5 {
    font-size: 24px;
    line-height: 28.8px;

    @media screen and (max-width: 930px) {
      font-size: 18px;
      line-height: 25.2px;
      letter-spacing: 0.36px;
    }
  }

  h4 {
    font-size: 18px;
    line-height: 25.2px;
    letter-spacing: 0.36px;
  }

  h5 {
    font-size: 16px;
    line-height: 22.4px;

    @media screen and (max-width: 930px) {
      font-size: 14px;
      line-height: 21px;
    }
  }

  h6, label {
    font-size: 14px;
    line-height: 21px;
  }

  .heading-7 {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.24px;
  }

  label {
    letter-spacing: 0.28px;
  }

  .text--white {
    color: white;
  }

  .text--black {
    color: #242718;
  }
  .text-black-darker {
   color: #141414;
  }

  .text--grey-darken-1 {
    color: #757575;
  }

  .text--primary {
    color: var(--primary);
  }

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

  .bg--secondary {
    background-color: var(--background-secondary);
  }

  /* misc */

  > section {
    display: grid;
  }

  .translucent, .disabled {
    opacity: .4;
  }

  .translucent-6 {
    opacity: .6;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .disabled {
    cursor: not-allowed;
  }

  button {
    cursor: pointer;
  }
}