Summary block customization CSS

My partners page (see url) does not look very good on mobile.

I have created the partner-page with a summary block (actually 3 summary blocks for different partner categories) where I have used Custom CSS to hide the item title and make the summary-thumbnail (partner-logo) smaller.

As a result of the first two changes, I also needed to move the exerpt up a bit to minimize the void after the smaller logo.

/* PARTNER-LIST CUSTOMIZATIONS */

//Summary page customization

//Hide Item Title
[data-section-id="64ba28c2818bb86d1650b942"] *
.sqs-block-summary-v2 .summary-title {
display: none;
}

//Make Logo smaller
[data-section-id="64ba28c2818bb86d1650b942"]
.sqs-block-summary-v2 .summary-thumbnail img{
  border-radius:20px;
  max-width: 50%;
  max-height: 50%;
}

//Move excerpt up to match smaller logo
[data-section-id="64ba28c2818bb86d1650b942"]
.sqs-block-summary-v2 .summary-excerpt {
  margin-top: -180px;
}
/* END PARTNER-LIST CUSTOMIZATIONS */

These customizations are what is causing a bad experience on the mobile.  (see attached examples of the current full-screen view and mobile view)

If I remove this custom CSS for the section, it looks great on mobile, but not good at all on a full size screen.

I have not used resolution specific CSS before, but have found some posts here on the forum that's suggesting that it should be possible to do what I need. But I haven't been able to figure out how to use this exactly in my example.

Could anyone please clarify for me how to make my CSS Customization code above specific for full-screen only?

27 minutes ago, Ziggy said:

First can you share your website URL and this page?

Second, you can use media querries to adjust CSS based on viewport size.

Something like this may work:

//Move excerpt up to match smaller logo
@media only screen and (min-width:768px) {
[data-section-id="64ba28c2818bb86d1650b942"]
  .sqs-block-summary-v2 .summary-excerpt {
    margin-top: -180px;
  }
}

Thanks @Ziggy