.container {
  .hero {
    padding: 8.3vw 0;
    overflow: hidden;

    .hero-title {
      line-height: 117%;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: #1A1A1A;
      font-size: 3vw;
    }

    .hero-subtitle {
      font-size: 1.3vw;
      line-height: 160%;
      color: #666;
      margin-top: 1.1vw;

      .mobile-text {
        display: none;
      }
    }

    .hero-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: stretch;
      gap: 1.6vw;
      margin-top: 3.3vw;

      .hero-item {
        display: flex;
        flex-direction: column;
        gap: 0.8vw;
        padding: 1.6vw;
        border-radius: 1.6vw;
        background: #F0F0F0;

        img {
          width: 9%;
          padding: 1.09vw;
          border-radius: 0.9vw;
          background: #34d07b26;
        }

        .hero-item-title {
          font-size: 1.3vw;
          line-height: 140%;
          text-transform: uppercase;
          color: #1A1A1A;
        }

        .hero-item-subtitle {
          font-size: 1vw;
          line-height: 157%;
          color: #666;
        }
      }
    }
  }

  .banner {
    display: flex;
    flex-direction: column;
    gap: 2.2vw;
    border-radius: 1.6vw;
    padding: 3.3vw 3.1vw;
    background: #1a1a1a;

    .banner-badge {
      width: fit-content;
      border-radius: 6.9vw;
      text-transform: uppercase;
      color: #34D07B;
      font-size: 1vw;
      font-weight: 500;
      letter-spacing: 0.08em;
      padding: 0.4vw 1.1vw;
      background: rgba(52, 208, 123, 0.15);
    }

    .banner-title {
      font-size: 2vw;
      text-transform: uppercase;
      color: #FFFFFF;
      letter-spacing: 0.02em;
    }

    .banner-subtitle {
      font-size: 1.1vw;
      color: #666666;
      line-height: 175%;
      letter-spacing: 0.03em;
    }
  }

  .our-gamification-btn {
    display: block;
    margin: 3.3vw auto 0;
    cursor: pointer;
    font-size: 1vw;
    border-radius: 100px;
    padding: 1.1vw 2.2vw;
    font-weight: 700;
    border: 0;
    text-transform: uppercase;
    color: #1A1A1A;
    background: #34D07B;
    transition: background 0.5s, color 0.5s;
    margin-bottom: 8.3vw;

    &:hover {
      background: #1A1A1A;
      color: #34D07B;
    }
  }
}

@media (max-width: 768px) {
  .container {
    main {
      .hero {
        .hero-title {
          font-size: 7.4vw;
        }

        .hero-subtitle {
          font-size: 3.7vw;

          .desktop-text {
            display: none;
          }

          .mobile-text {
            display: block;
          }
        }

        .hero-list {
          grid-template-columns: repeat(2, 1fr);
          gap: 2.2vw;

          .hero-item {
            padding: 5.3vw;
            gap: 1.8vw;

            img {
              padding: 2.4vw 2.7vw;
              border-radius: 3.2vw;
              width: fit-content;
            }

            .hero-item-title {
              font-size: 4.2vw;

              .desktop-text {
                display: none;
              }

              .mobile-text {
                display: block;
              }
            }

            .hero-item-subtitle {
              font-size: 3.2vw;

              .desktop-text {
                display: none;
              }

              .mobile-text {
                display: block;
              }
            }
          }
        }
      }

      .banner {
        padding: 4.8vw;

        .banner-badge {
          font-size: 2.6vw;
          padding: 1.3vw 2.6vw;
        }

        .banner-title {
          font-size: 4.2vw;

          .desktop-text {
            display: none;
          }

          .mobile-text {
            display: block;
          }
        }

        .banner-subtitle {
          font-size: 3.4vw;
        }

        .banner-strong {
          font-size: 4.2vw;
        }

        .banner-list {
          grid-template-columns: 1fr;
          gap: 3.2vw;

          .banner-item {
            font-size: 3.4vw;

            &:nth-child(1)::before {
              padding: 1.6vw 2.9vw;
            }

            &::before {
              padding: 1.7vw 2.2vw;
              margin-right: 1.6vw;
            }
          }
        }
      }

      .our-gamification-btn {
        padding: 3.7vw 7.4vw;
        font-size: 3.7vw;
      }
    }
  }
}