.section-listing { position: relative; padding: 0px 55px; }
.section-listing > .wrapper { background-color: #fff; border-radius: 40px; padding: 32px; display: flex; flex-direction: column; gap: 45px; }
.section-listing > .wrapper > .category > h2 { font-weight: 400; color: #6b27ff; padding: 8px; background-color: #efe7ff; width: fit-content; border-radius: 2px;  }
.section-listing > .wrapper > .category > .items { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px; padding: 0px 8px; }
.section-listing > .wrapper > .category > .items > a { padding-left: 8px; text-decoration: none; color: #494949; transition: color 0.4s; }
.section-listing > .wrapper > .category > .items > a:hover { color: #6b27ff; text-decoration: underline; }

@media all and (max-width: 1600px) {
    .section-listing { padding: 0px 35px; }
    .section-listing > .wrapper { padding: 24px; }
}

@media all and (max-width: 1200px) {
    .section-listing { padding: 0px 27px; }
    .section-listing > .wrapper { padding: 16px; border-radius: 24px; }
    .section-listing > .wrapper > .category > .items { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

@media all and (max-width: 1000px) {
    .section-listing > .wrapper > .category > .items { grid-template-columns: 1fr 1fr 1fr; }
}

@media all and (max-width: 767px) {
    .section-listing > .wrapper > .category > .items { grid-template-columns: 1fr 1fr; }
}

@media all and (max-width: 576px) {
    .section-listing > .wrapper > .category > .items { grid-template-columns: 1fr; }
}