/* ---------- tablet widths ---------- */
@media screen and (min-width: 768px) {
    .hero-text h1 {
        font-size: 60px;
    }
    #brands-section {
        min-height: 0;
        padding: 48px 0;
    }
    
    .brand-description {
        width: 100%;
        min-height: 0;
        padding: 0 32px;
    }
    
    .brand-description h1 {
        font-size: 44px;
    }
    
    .logo-list {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        gap: 16px;
    }
    
    .logo-list li {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    
    .logo-list img {
        max-width: 100%;
        height: auto;
    }
    
    /* ---------- Offer: still two columns, narrower ---------- */
    #offer-section {
        padding: 0 32px;
    }
    
    .offer-column {
        width: 100%;
        max-width: 1140px;
        min-height: 0;
        gap: 32px;
    }
    
    .offer-image {
        flex: 1 1 0;
        min-width: 0;
        max-width: 560px;
        width: auto;
        height: auto;
        aspect-ratio: 560 / 570;
    }
    
    .offer-description {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: 516px;
    }
    
    .offer-description h2 {
        font-size: 28px;
        line-height: 34px;
    }
    
    .offer-description p,
    .offer-description li {
        font-size: 14px;
        line-height: 22px;
    }
    
    /* ---------- Story: same look, flexible widths ---------- */
    #our-story-section {
        padding: 48px 32px;
    }
    
    .story-description {
        width: 100%;
        max-width: 955px;
        height: auto;
    }
    
    .story-description h1 {
        width: 100%;
    }
    
    .story-text {
        width: 100%;
        max-width: 793px;
    }
    
    /* ---------- Why Us: 2 x 2 grid ---------- */
    #why-us-section {
        height: auto;
        gap: 48px;
    }
    
    .why-us-list {
        width: 100%;
        max-width: 560px;                 /* 2 x 250 + 60 */
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px 60px;
    }
}