@layer general {
    .bookmark-container {
        display: grid;
        gap: 1rem;
    }

    @media (min-width: 768px) {
        .bookmark-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width: 1200px) {
        .bookmark-container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (min-width: 1632px) {
        .bookmark-container {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    .bookmark {
        display: block;
        text-decoration: none;
        color: #444;

        border: 1px solid #d5d5d5;
        border-radius: 0.25rem;
        margin-bottom: 1rem;

    }

    .bookmark-body {
        padding: 0.5rem 1rem;
    }

    .bookmark-header {
        padding: 0.5rem 1rem;
        /* background-color: #f7f7f7; */
        background-image: linear-gradient(white, #eee 50%, #e4e4e4);
        border-bottom: 1px solid #d5d5d5;
    }

    @media (prefers-color-scheme: dark) {
        .bookmark {
            color: #aaa;
            border: 1px solid #202024;
        }

        .bookmark-header {
            /* background-color: #1f1f23; */
            background-image: linear-gradient(to top, #101012, #18181b 50%, #202024);
            border-bottom: 1px solid #202024;
        }
    }

    .bookmark h2 {
        font-size: 1.5rem;
        color: #36a1ff;
        transition: color 0.2s ease-in-out;
        margin-top: 0.5rem;
    }

    .bookmark:hover h2 {
        color: #297ac2;
    }
}