/* Responsive bands without touching 1500px exact */

/* Base helpers (safe) */
.container {
    box-sizing: border-box;
}

section.service .grid,
.works__grid,
.highlight__content {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* 0–349px */
@media (max-width: 349px) {
    .container {
        padding-inline: 16px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* 350–399px */
@media (min-width: 350px) and (max-width: 399px) {
    .container {
        padding-inline: 16px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* 400–499px */
@media (min-width: 400px) and (max-width: 499px) {
    .container {
        padding-inline: 18px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* 500–599px */
@media (min-width: 500px) and (max-width: 599px) {
    .container {
        padding-inline: 20px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* 600–699px */
@media (min-width: 600px) and (max-width: 699px) {
    .container {
        padding-inline: 22px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* 700–799px */
@media (min-width: 700px) and (max-width: 799px) {
    .container {
        padding-inline: 22px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* 800–899px */
@media (min-width: 800px) and (max-width: 899px) {
    .container {
        padding-inline: 24px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* 900–999px */
@media (min-width: 900px) and (max-width: 999px) {
    .container {
        padding-inline: 24px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px !important;
    }

    .highlight__content {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* 1000–1099px */
@media (min-width: 1000px) and (max-width: 1099px) {
    .container {
        padding-inline: 28px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }
}

/* 1100–1199px */
@media (min-width: 1100px) and (max-width: 1199px) {
    .container {
        padding-inline: 28px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }
}

/* 1200–1299px */
@media (min-width: 1200px) and (max-width: 1299px) {
    .container {
        padding-inline: 32px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 32px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 32px !important;
    }
}

/* 1300–1399px */
@media (min-width: 1300px) and (max-width: 1399px) {
    .container {
        padding-inline: 36px !important;
    }

    section.service .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 36px !important;
    }

    .works__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 36px !important;
    }
}

/* 1400–1499px */
@media (min-width: 1400px) and (max-width: 1499px) {
    .container {
        padding-inline: 40px !important;
    }

    section.service .grid,
    .works__grid {
        gap: 36px !important;
    }
}

/* 1501–1599px */
@media (min-width: 1501px) and (max-width: 1599px) {
    .container {
        max-width: 1500px !important;
        margin-inline: auto !important;
    }
}

/* 1600–1699px */
@media (min-width: 1600px) and (max-width: 1699px) {
    .container {
        max-width: 1500px !important;
        margin-inline: auto !important;
    }
}

/* 1700–1799px */
@media (min-width: 1700px) and (max-width: 1799px) {
    .container {
        max-width: 1500px !important;
        margin-inline: auto !important;
    }
}

/* 1800px+ */
@media (min-width: 1800px) {
    .container {
        max-width: 1500px !important;
        margin-inline: auto !important;
    }
}