/*@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&display=swap");


h2, small {
    display: block;
    color: white;
    font-weight: 300;
    margin-right: 2rem;
}

.samples {
    display: flex;
    flex-wrap: wrap;
    max-width: 480px;
}

.sample {
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 128px;
    height: 96px;
    position: relative;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.ribbon {
    position: absolute;
    left: var(--left, 4px);
    top: var(--top, -3px);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}

    .ribbon > .content {
        color: white !important;
        font-size: 1.25rem !important;
        text-align: center !important;
        font-weight: 400 !important;
        background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%) !important;
        padding: 8px 2px 4px !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%) !important;
        width: var(--width, 32px) !important;
        min-height: var(--height, 36px) !important;
        transition: clip-path 1s, padding 1s, background 1s !important;
    }

    .ribbon.slant-up > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%);
    }

    .ribbon.slant-down > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px));
    }

    .ribbon.down > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
    }

    .ribbon.up > .content {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    }

    .ribbon.check > .content {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px));
    }*/