main {
    .listing {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        div {
            background-color: #fff;
            border-radius: 12px;
            border: 1px solid #0002;
            overflow: hidden;
            box-shadow: 2px 2px 8px 0 #0002;
            display: flex;
            align-items: center;
            flex-direction: column;
            h2 {
                width: 100%;
                font-size: 20px;
                padding: 8px 12px;
            }
            p {
                width: 100%;
                padding: 0 12px;
                text-align: right;
                color: #000;
                margin-top: auto;
            }
            img {
                width: 100%;
                aspect-ratio: 16/10;
                height: auto;
            }
        }
    }
    .paginator {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        img, p {
            background-color: #4b0708;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            color: #fff;
            cursor:not-allowed;
        }
    }
}

@media only screen and (max-width:1000px) {
    main {
        .listing {
            grid-template-columns: 1fr;
        }
    }
}