.hero .container .hero-intro-wrap {
    padding: 0 16px;
}
.hero .hero-img {
  width: 100%;
  display: block;
  position: relative;
  height: 300px;
}
.all-product-section .top-products {
    margin-bottom: 24px;
}
.benefits li {
    list-style: none;
    background: url('../images/ic-check.svg') no-repeat left 4px;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #2c2c2e;
    text-align: left;
    padding-left: 32px;
}
.discount-wrap .inner {
    padding-block: 24px;
}
.harvest-hosts-works {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Small devices (landscape phones, 374px and down) */
@media (max-width: 374px) {
    .hero .hero-img {
        height: 300px;
    }
    .hero .hero-intro-wrap .hero-intro h1 {
        margin-bottom: 12px;
    }
    .hero .hero-intro-wrap .hero-intro h2 {
        margin-bottom: 12px;
    }
    .section-text-block a.purple-btn {
        margin-top: 12px;
    }
    .section-text-block {
        padding-bottom: 12px;
    }
    .all-product-section .top-products {
        gap: 14px 0;
    }
}

/* Small devices (landscape phones, 375px and up) */
@media (min-width: 375px) {
    .hero .hero-img {
        height: 300px;
    }
    .hero .hero-intro-wrap .hero-intro h1 {
        margin-bottom: 12px;
    }
    .hero .hero-intro-wrap .hero-intro h2 {
        margin-bottom: 12px;
    }
    .section-text-block a.purple-btn {
        margin-top: 12px;
    }
    .section-text-block {
        padding-bottom: 12px;
    }
     .all-product-section .top-products {
        gap: 14px 0;
    }
}

/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hero .hero-img {
        height: 350px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .hero .hero-img {
        height: 550px;
    }
    .harvest-hosts-works {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .hero .container .hero-intro-wrap {
        padding: 0 120px;
    }
    .hero .hero-img {
        height: 578px;
    }
    .all-product-section .top-products {
        margin-bottom: 80px;
    }
    .all-product-header h2 {
        margin-bottom: 24px;
    }
    .discount-wrap .inner, .all-product-section .inner {
        padding: 32px 0;
    }
}