@media screen and (min-width: 0px) {
  .nanoleaf-ai {}
  .nanoleaf-ai .hero { display: grid; gap: 28px; padding: var(--section-padding) var(--page-padding); background-color: #F3F4F5; }
  .nanoleaf-ai .hero .subtitle { color: #006D3B; font-size: 12px; line-height: 20px; }
  .nanoleaf-ai .hero h2 { margin: 4px 0 12px; }
  .nanoleaf-ai .hero .divimg { border-radius: 24px; overflow: hidden; }
  .nanoleaf-ai .s1,
  .nanoleaf-ai .s2,
  .nanoleaf-ai .s3 { padding: var(--section-padding) var(--page-padding); }
  .nanoleaf-ai .s1 { background-color: #F8F9FA; }
  .nanoleaf-ai .s1 h2 { margin-bottom: 20px; }
  .nanoleaf-ai .s1 h2::after { content: ''; display: block; margin-top: 2px; width: calc(var(--font-title-xl) * 4.4); border-bottom: 4px solid #51BD7A; }
  .nanoleaf-ai .s1 .wrapper { display: grid; gap: 40px; }
  .nanoleaf-ai .s1 .item { display: grid; gap: 24px; }
  .nanoleaf-ai .s1 .item .divimg { border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
  .nanoleaf-ai .s1 .item .subtitle { display: inline-block; padding: 0px 16px; border-radius: 20px; background-color: #51BD7A; color: #FFF; font-size: 12px; line-height: 28px; }
  .nanoleaf-ai .s1 .item h3 { margin: 8px 0 16px; }
  .nanoleaf-ai .s1 .item .btn { margin-top: 16px; }
  .nanoleaf-ai .s2 { display: grid; gap: 40px; }
  .nanoleaf-ai .s2 .wrapper-top { display: grid; gap: 20px; }
  .nanoleaf-ai .s2 .wrapper-top .item { padding: 28px 20px; background-color: #F3F4F5; border-radius: 24px; }
  .nanoleaf-ai .s2 .wrapper-top .item .divicon { width: 40px; }
  .nanoleaf-ai .s2 .wrapper-top .item .label { margin: 8px 0; font-weight: 700; }
  .nanoleaf-ai .s2 .wrapper-bottom .subtitle { color: #006D3B; font-size: 12px; line-height: 20px; }
  .nanoleaf-ai .s2 .wrapper-bottom h2 { margin: 4px 0 12px; }
  .nanoleaf-ai .s2 .wrapper-bottom .feature { display: grid; gap: 16px; margin-top: 20px; }
  .nanoleaf-ai .s2 .wrapper-bottom .feature .item { display: grid; gap: 12px; grid-template-columns: 28px 1fr; }
  .nanoleaf-ai .s2 .wrapper-bottom .feature .label { font-weight: 700; }
  .nanoleaf-ai .s3 { background-color: #F3F4F5; }
  .nanoleaf-ai .s3 .wrapper { display: grid; gap: 28px; }
  .nanoleaf-ai .s3 .wrapper .item { padding: 28px 20px; background-color: #FFFF; border-radius: 24px; }
  .nanoleaf-ai .s3 .wrapper .item .divicon { width: 40px; }
  .nanoleaf-ai .s3 .wrapper .item:nth-child(3) .divicon { width: 32px; }
  .nanoleaf-ai .s3 .wrapper .item h3 { margin: 12px 0 16px; }
}
@media screen and (min-width: 768px) {
  .nanoleaf-ai .hero { grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: center; }
  .nanoleaf-ai .hero .content { max-width: 400px; }
  .nanoleaf-ai .s1 .wrapper { gap: 80px; }
  .nanoleaf-ai .s1 .item { grid-template-columns: 3fr 2fr; gap: 60px; align-items: center; }
  .nanoleaf-ai .s1 .item:nth-child(even) { grid-template-columns: 2fr 3fr; }
  .nanoleaf-ai .s1 .item:nth-child(even) .wrapper-left { order: 2; }
  .nanoleaf-ai .s1 .item .wrapper-right { max-width: 420px; }
  .nanoleaf-ai .s2 .wrapper-top { gap: 40px; grid-template-columns: repeat(2, 1fr); }
  .nanoleaf-ai .s2 .wrapper-top .item { padding: 40px 36px; }
  .nanoleaf-ai .s3 .wrapper { grid-template-columns: repeat(3, 1fr); }
  .nanoleaf-ai .s3 .wrapper .item { padding: 36px 28px; }
}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1200px) {
  .nanoleaf-ai .s1 h2 { margin-bottom: 32px; }
  .nanoleaf-ai .s2 { grid-template-columns: repeat(2, 1fr); gap: 6vw; align-items: flex-start; }
  .nanoleaf-ai .s2 .wrapper-top { gap: 20px; }
  .nanoleaf-ai .s3 .wrapper { gap: 40px; }
  .nanoleaf-ai .s3 .wrapper .item { padding: 40px 36px; }
}
@media screen and (min-width: 1440px) {
  .nanoleaf-ai .hero .subtitle { font-size: 14px; line-height: 24px; }
  .nanoleaf-ai .s1 .item .subtitle { font-size: 14px; }
  .nanoleaf-ai .s2 .wrapper-bottom .subtitle { font-size: 14px; }
}