@layer page {
    main {
        background: #e8e8e8;

        justify-self: center;

        display: grid;
        grid-auto-flow: row;

        justify-items: center;

        padding: 3rem;

        gap: 3rem;

        width: 100%;

        position: relative;

        &::after {
            content: '';
            width: 100%;
            height: 80vh;

            background: linear-gradient(to bottom, transparent, #e8e8e8);

            position: absolute;
            bottom: 0;
            left: 0;
        }

        .search {
            max-width: 80ch;
        }

        .appunti-scrollable {
            justify-self: stretch;

            &.center {
                justify-self: center;
            }
        }

        @media screen and (max-width: 1024px) {
            padding: 3rem 1rem;
            gap: 3rem;

            overflow: clip;

            .card {
                width: 100%;
            }
        }
    }
}