To make the featured main section wider on mobile devices using CSS, you can use a media query to target devices with a smaller screen size. Here’s an example of how you could do this:

/* Default styles for the featured main section */
.featured-main {
width: 80%; /* or any other width */
/* Other styles */
}

/* Media query to target mobile devices */
@media (max-width: 768px) {
/* Styles to apply on mobile devices */
.featured-main {
width: 90%; /* or any other width */
}
}

This media query targets devices with a screen width of 768px or less and applies the styles inside the query to the .featured-main class. You can adjust the width of the .featured-main class inside the media query to make it wider on mobile devices as needed.

You can also use different units like vw (viewport width) or vh (viewport height) to make the element responsive.

/* Media query to target mobile devices */
@media (max-width: 768px) {
/* Styles to apply on mobile devices */
.featured-main {
width: 100vw;
}
}
This will make the featured main section 100% of the viewport width on mobile devices.

Please let me know if you have any other questions.