@font-face {
    font-family: notosans;
    src: url(../Font/Noto_Sans/static/NotoSans-SemiBold.ttf);
}

body {
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}
body ul {
    list-style: none;
    column-count: 3;
    column-gap: 0.6rem;
}
body ul li {
    cursor: pointer;
    transition: 0.3s;
    margin-bottom: 0.6rem;
    border-radius: 0.3rem;
    overflow: hidden;
    position: relative;
}
body ul li figure {
    margin: 0;
    /* display: flex; */
    break-inside: avoid;
    position: relative;
}
body ul li figure img {
    width: 100%;
    transition: 0.3s;
}
.photo img{
    width: 7%;
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 111111;
}
/* body ul li:hover {
    transform: translateY(0.2rem);
} */
body ul li:hover img {
    transform: scale(1.05);
}
body ul li figure p{
    position: absolute;
    bottom: 0px;
    background: linear-gradient(45deg,rgba(255, 0, 0, 0.763),rgba(255, 255, 255, 0.292));
    font-size: 30px;
    width: 100%;
    padding: 5px 0px 5px 9px ;
    color: #f0f0f0;
    font-family: notosans;

}
@media (max-width:768px) {
    body ul {
        list-style: none;
        column-count: 1;
        column-gap: 0.6rem;
        padding: 0;
    }
}