Custom classes for carrousel fields

Since we can’t nest elements in carrousel, we need a way to add classes to the different fields.

For instance, I want to use my utility class to add quotes to testimonials:

I guess for simple things I could use root .content-wrapper > :first-child, but it’s a bit annoying when CSS is a more complex:

/*=============================================
=                 Quotes                      =
=============================================*/

[class*="quote--"], blockquote p {
	font-style: italic;
}
[class*="quote--"], blockquote {
    position: relative;
    z-index: 0;
}
[class*="quote--"]::before, [class*="quote--"]::after,
blockquote::before, blockquote::after {
    position: absolute;
    line-height: 0;
    font-size: 7em;
    color: var(--accent);
    z-index: -1;
    opacity: 0.5;
}
[class*="quote--"]::before, blockquote::before {
    content: '\275d';
    /*content: '\201c';*/
    top: 5rem;
    left: -1rem;
}
[class*="quote--"]::after, blockquote::after {
    content: '\275e';
    /*content: '\201d';*/
    bottom: -1rem;
    right: 2rem;
}

.quote--s::before, .quote--s::after {
    font-size: 3em;
}
.quote--s::before {
    top: 1rem;
    left: -2rem;
}
.quote--s::after {
    bottom: -1rem;
    right: 1rem;
}

.quote--l, blockquote {
    padding: var(--space-m) var(--space-xl);
}