Better display of media resources such as images and videos

[aliuq]

Describe the solution you'd like

Hope to use grid to better adapt to media resources

There is no special class used to identify a certain page, which causes the custom css selector to affect all pages

Type of feature

User Interface (UI)

Additional context

custom style, I can't make it only take effect on the home page and not the /resources page.

main > section > div > div > div:nth-child(2) > div > div:has(video),
main > section > div > div > div:nth-child(2) > div > div:has(img) {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0.25rem;
}

main > section > div > div > div:nth-child(2) > div > div:has(video) > *,
main > section > div > div > div:nth-child(2) > div > div:has(img) > * {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
}

main > section > div > div > div:nth-child(2) > div > div:has(video) video {
  object-fit: cover;
}

[aliuq]

I hope the official can support better display media resources. I modified some using AI generation, but it is not suitable for production environment because I can't determine if there is anything affecting performance.