@media (max-width: 1200px) {
  :root {
    --font-size-h1: 48px;
    --font-size-h2: 80px;
    --font-size-h3: 32px;
    --font-size-h4: 20px;
    --font-size-body-large: 28px;
    --font-size-body: 20px;
    
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 56px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 96px;
    --spacing-11xl: 128px;
  }
  .workflow .box .title {
    min-width: 400px;
  }
  section.hero .title { 
    display: flex;
    justify-content: space-between;
    flex-direction: column; 
  }
  .text-right { 
    padding-top: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 60px;
    --font-size-h3: 32px;
    --font-size-h4: 18px;
    --font-size-body-large: 22px;
    --font-size-body: 18px;
    
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 16px;
    --spacing-4xl: 32px;
    --spacing-5xl: 32px;
    --spacing-6xl: 48px;
    --spacing-7xl: 48px;
    --spacing-8xl: 72px;
    --spacing-9xl: 80px;
    --spacing-10xl: 80px;
    --spacing-11xl: 96px;
    }
    .subtext {
      width: 100%;
      text-align: center;
      padding: var(--spacing-7xl) 0px var(--spacing-7xl) 0px;
      background-image: none;
    }
    .subtext p {
      padding: 0px;
    }
    .workflow .box {
      flex-flow: column;
    }

    .workflow .brand  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .mood  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .design-system  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .component  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .design  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .responsive  .title {
      background: url(img/orange.svg) bottom left;
    }
    .workflow .box .text {
      margin-left: var(--spacing-7xl);
      margin-top: var(--spacing-8xl);
    }
    .workflow .box {
      height: auto;
      top: 360px;
    }
    .ready-to-build .subtext {
      padding: var(--spacing-7xl) 0px var(--spacing-7xl) 0px;
  }
    section.hero {
      background-image: url(img/hero-bg-phone.jpg);
      background-repeat: no-repeat;
      background-position: top right;
    }
    .about-me .conteiner .numbers {
      flex-direction: column;
    }
    .about-me .conteiner .numbers .line {
      height: 2px;
      width: 100%;
      background-color: rgb(255, 255, 255, 0.1);
    }
    .portfolio-track {
      padding-left: 64px;
    }
    .figma-logo-large {
      display: none;
    }
  }


@media (max-width: 480px) {
  :root {
    --font-size-h2: 40px;
    --font-size-h3: 24px;
    --font-size-h4: 18px;
    --font-size-body-large: 20px;
    --font-size-body: 16px;

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 16px;
    --spacing-4xl: 32px;
    --spacing-5xl: 32px;
    --spacing-6xl: 48px;
    --spacing-7xl: 40px;
    --spacing-8xl: 72px;
    --spacing-9xl: 80px;
    --spacing-10xl: 645px;
    --spacing-11xl: 80px;
  }
  .subtext {
    background-image: none;
  }
  .subtext p {
    padding: 0px;
  }
  .ready-to-build .figma-logo-large {
    display: none;
  }
  .ready-to-build .subtext {
    width: 100%;
  }

   .ready-to-build .subtext p {
    padding: 0px;
  }
  .workflow .box {
    top: 300px;
  }
  .features {
    gap: 0px;
  }
  .features .content-box {
    min-height: 100px;
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-3xl);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid rgb(255, 255, 255, 0.3);
    border-radius: 0px;
  }
  .features .content-box h4 {
    padding-left: var(--spacing-5xl);
  }
  section.hero .left,
  section.hero .right {
    width: 100%;
    height: auto;
  }
  section.hero .right {
    text-align: left;
    padding: 0px 48px 48px 48px;
  }
  .conteiner-fullw {
    flex-direction: column;
    justify-content: flex-end;
  }
  section.hero .left {
    border-top: none;
    background-color: rgba(0, 0, 0, 0); /* průhledné pozadí */
    backdrop-filter: none;
    padding: 48px 48px 16px 48px;
  }
  section.footer .left {
    padding-top: var(--spacing-9xl);
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }
  section.footer  .bottom {
    margin-top: 32px;
  }
  .toolbox {
    align-items: flex-start;
  }
  section.tools  .boxy .loga {
    flex-direction: column;
    max-width: 216px;
  } 
  .digiholic {
    display: none;
  } 
  .portfolio-section {
    width: 100%;
  }
  .portfolio-track {
    padding: 32px;
    flex-direction: column;
    gap: 32px;
  }
  .portfolio-scroll-wrapper {
    height: auto;
    width: 100%;
  }
  .portfolio-item,
  .portfolio-item-title {
    width: 100%;
    height: auto;
  }
  .portfolio-item-title {
    border: none;
    text-align: center;
    padding: 0px;
  }
}