Image Card (auto Layout Gallery) rounded corners with full width image.

I'm trying to make the image cards on my website look like the image cards on my figma file.

PW: victory

Current CSS code

// Auto Carousel List - Card Border Radius //
.user-items-list-carousel .list-item { 
  border: 2px solid #eee;
  border-radius: 20px !important;
}


/* Hide controls on native video player */
.video-player .plyr .plyr__controls {
  display: none;
}

// Rounded corner on Video Player  //
.video-player .plyr video {
    object-fit: cover !important;
    border-radius: 20px !important;
}

// Rounded corner on image blocks  //
.user-items-list-carousel .list-item img {
  border-radius: 20px !important;
}


// Vertical Video Player  //
.sqs-native-video .native-video-player {
    padding-bottom: 80% !important;
}

#block-yui_3_17_2_1_1716925040398_5141.video-block .video-player{
  padding-bottom: 120%;
  border-radius: 20px !important;
}

// Scroller Cards  //
section[data-section-id="665720dceda419650c4267d7"] {
  --item-width: 270px;
  --additional-offset: 0px;

  .user-items-list-carousel__gutter {
    padding-left:0px !important;
    padding-right:0px !important;
  }
  .user-items-list-carousel__slides {
    overflow-x:scroll;
    grid-template-columns:unset !important;
    grid-auto-columns:var(--item-width);
    cursor: auto;
    padding-left:~'calc(var(--offset-left) + var(--additional-offset))';
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .user-items-list-carousel__slides::-webkit-scrollbar {
    display: none;
  }

  .list-item {
    transform: unset !important;
    grid-row: 1;
    grid-column: unset;
    pointer-events:unset;
    user-select: unset;
    cursor: auto;
  }
  .desktop-arrows, .desktop-arrows{
    display: none !important;
  }
}

[class*="mobile-arrow"] {
	display: none !important;
}

What is the URL for you site?

@dsunnock You can try adding this code snippet under Utilities > Website Tools > Custom CSS. Make sure you add this code after your existing code. 

.user-items-list-carousel .list-item img {
	border-radius: 20px 20px 0 0 !important;
}
.user-items-list-carousel[data-alignment-vertical="middle"] .user-items-list-carousel__slide {
	padding: 0 !important;
}
.user-items-list-carousel .list-item {
	border: 0px solid #eee !important;
}
.list-item-content {
	padding: 20px;
}
.user-items-list-carousel[data-button-placement="center"] .list-item-content__button-container {
	display: flex !important;
	justify-content: center !important;
	margin-top: 14% !important;
}

Let me know how it goes. Thanks!