@font-face {
    font-family: "BricolageGrotesque";
    src:
        url('https://content-eu-9.content-cms.com/f6965cc4-b689-4639-9cac-3db7ae89c0e5/dxdam/23/2350aef8-b921-4e82-b0d5-4a0fbf75059b/BricolageGrotesque.ttf');
}

@font-face {
    font-family: "Cabin";
    src:
        url('https://content-eu-9.content-cms.com/f6965cc4-b689-4639-9cac-3db7ae89c0e5/dxdam/be/be86f683-238d-4b90-9204-82cbd282d5d4/Cabin.ttf');
}

* {

}

body {
    background-color: #f9fafb;
    font-family: Cabin;
}

.font-bricolage-grotesque {
    font-family: BricolageGrotesque;
}

.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

[role="tooltip"] {
    background-color: #333;
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    width: fit-content;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-5px);
    z-index: 10;
    white-space: normal;
}

.tooltip-wrapper:hover [role="tooltip"],
.tooltip-wrapper:focus-within [role="tooltip"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}