/*
 * Stable festival-card icon rendering.
 *
 * Several discovery-card icons were previously assembled from fractional
 * borders and pseudo-elements. At some browser zoom/DPI combinations those
 * strokes can rasterize with visibly extended or skewed lines. Use simple
 * SVG masks for the affected date/location/venue/music icons so they keep
 * their proportions while still inheriting the card's current text color.
 */

.ff-festival-card .ff-festival-card-fact i,
.ff-festival-card .ff-festival-card-sound-icon {
    position: relative;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    overflow: hidden;
}

.ff-festival-card .ff-festival-card-fact i::before,
.ff-festival-card .ff-festival-card-sound-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    transform: none;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ff-festival-card .ff-festival-card-fact i::after,
.ff-festival-card .ff-festival-card-sound-icon::after {
    content: none;
    display: none;
}

.ff-festival-card .ff-festival-card-fact--date i::before {
    -webkit-mask-image: url('/icons/festival-card/calendar.svg');
    mask-image: url('/icons/festival-card/calendar.svg');
}

.ff-festival-card .ff-festival-card-fact--location i::before {
    -webkit-mask-image: url('/icons/festival-card/location.svg');
    mask-image: url('/icons/festival-card/location.svg');
}

.ff-festival-card .ff-festival-card-fact--venue i::before {
    -webkit-mask-image: url('/icons/festival-card/venue.svg');
    mask-image: url('/icons/festival-card/venue.svg');
}

.ff-festival-card .ff-festival-card-sound-icon::before {
    -webkit-mask-image: url('/icons/festival-card/music.svg');
    mask-image: url('/icons/festival-card/music.svg');
}