body {width: 100%;
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.memos {width: 100%;
    background-color: #111;
    padding: 0px;
}

.memos ul {
    width: 100%;
    padding: 0;margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px;
    list-style: none;
    
}

.memos li {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding-bottom: 61.8%; /* 高度为宽度的2/3 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: top;
    transition: 0.5s;
}

.memos li:hover {
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: darken;
    transition:  0.5s;
}
.memos li:hover .memo-text,.memos li:hover .memo-timestamp{opacity: 1;transition:  0.5s;}

.memo-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 14px;
    z-index: 1;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity:0;transition:  0.5s;
}

.memo-timestamp {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 12px;
    z-index: 1;
    opacity:0;transition:  0.5s;
}

button.load-btn.button-load,
.tag-span,
.resource-wrapper,
.memos__userinfo {
    display: none; /* 隐藏这些元素 */
}

@media (max-width: 2560px) {
    .memos ul {
        grid-template-columns: repeat(8, 1fr);
    }
@media (max-width: 2140px) {
    .memos ul {
        grid-template-columns: repeat(7, 1fr);
    }
@media (max-width: 1920px) {
    .memos ul {
        grid-template-columns: repeat(6, 1fr);
    }
@media (max-width: 1600px) {
    .memos ul {
        grid-template-columns: repeat(5, 1fr);}
    }

@media (max-width: 1280px) {
    .memos ul {
        grid-template-columns: repeat(4, 1fr);}
    }
@media (max-width: 1080px) {
    .memos ul {
        grid-template-columns: repeat(3, 1fr);}

    }
@media (max-width: 720px) {
    .memos ul {
        grid-template-columns: repeat(2, 1fr);}

    }

@media (max-width: 480px) {
    .memos ul {
        grid-template-columns: 1fr;
    }
}