.container-large{
    width: var(--reportwidth);
}

.reports-holder{
    width: var(--reportwidth);
    flex-wrap: var(--flexwrap);
    gap: var(--reportsgap);
    margin: 0 auto;
    /* justify-content: center; */
    justify-content: flex-start;
    transition-duration: 0.4s;
}
.report-box{
    width: var(--reportholderwidth);
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 5px;
    transition-duration: 0.4s;
}
.report-box:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 7px;
}
.report-box:hover .report-image img{
    filter: brightness(1);
    scale: 1.04;
}
.report-image{
    width: var(--reportholderwidth);
    height: var(--reportholderheight);
    padding-top: var(--reportholderpaddingtop);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.report-image img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition-duration: 0.4s;
    filter: brightness(0.9);
    scale: 1;
}
.month-box{
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 50px;
    z-index: 2;
}
.month-box div:nth-child(1){
    font-size: 24px;
    margin-top: -1px;
}
.month-box div:nth-child(2){
    font-size: 16px;
    margin-top: -7px;
}
.info-box{
    padding: 10px 15px;
    height: 90px;
    background-color: #fff;
}
.info-box .category{
    font-size: 16px;
    color: var(--colorGrayMedium);
}
.report-image .img-null{
    width: var(--reportholderwidth) !important;
    height: var(--reportholderheight) !important;
}

.report-content-holder{
    width: var(--reportcontentwidth);
}
a .report-gallery-box{
    color: inherit;
}
.report-gallery-box:hover img{
    filter: brightness(1);
    scale: 1.05;
}
.report-gallery-box:hover .report-gallery-content{
    background-color: #fafafa;
}
.report-gallery-img{
    width: 120px; 
    height: 80px;
    overflow: hidden;
    position: relative;
}
.report-gallery-img img{
    filter: brightness(0.9);
    scale: 1;
    transition-duration: 0.4s;
}
.report-gallery-content{
    color: #000;
    width: var(--gallerycontentwidth); 
    padding:5px 10px; 
    background-color: var(--colorGrayLightst);
}

.comment-box{
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: var(--colorGrayLightest);
    transition-duration: 0.4s;
}
.interaction .like{
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--colorThemeDark);
}
.interaction .like:hover{
    background-color: var(--colorGrayLighter);
}
.interaction .btn{
    padding: 5px 15px;
    margin: 0;
    border-radius: 8px;
}
.interaction .btn:hover{
    background-color: var(--colorGrayLighter);
}
.interaction a .btn{
    color: #000;
}

@media only screen and (max-width: 450px) {

    :root{
        --flexwrap: wrap;
        --reportsgap: 30px;
        --reportholderwidth: 100%;
        --reportholderpaddingtop: 60%;
        --reportwidth: 90%;
        --reportcontentwidth: 100%;
    }
    .report-image{
        height: 0px;
    }
    .gallery-view{
        display: none;
    }
}

@media only screen and (min-width: 451px) {

    :root{
        --flexwrap: wrap;
        --reportsgap: 20px;
        --reportholderwidth: 195px;
        --reportholderheight: 140px;
        --reportholderpaddingtop: 0px;
        --reportwidth: calc( var(--reportholderwidth) * 2 + var(--reportsgap));
    }
    .gallery-view{
        display: none;
    }
}


@media only screen and (min-width: 601px) {

    :root{
        --flexwrap: wrap;
        --reportsgap: 30px;
        --reportholderwidth: 250px;
        --reportholderheight: 180px;
        --reportholderpaddingtop: 0px;
        --reportwidth: calc( var(--reportholderwidth) * 2 + var(--reportsgap));
        --reportcontentwidth: 100%;
    }
    .gallery-view{
        display: none;
    }
}

@media only screen and (min-width:870px) {
    :root{
        --reportholderwidth: 250px;
        --reportholderheight: 180px;
        --reportwidth: calc( (var(--reportholderwidth) + 30px) * 3 - var(--reportsgap));
        --reportcontentwidth: 500px;
        --gallerycontentwidth: 160px;
    }
    .gallery-view{
        display: block;
        top: 10px;
        height: 700px;
    }
}

@media only screen and (min-width: 1200px) {
    /* Extra large devices: */
    :root{
        --reportwidth: calc( (var(--reportholderwidth) + 30px) * 4 - var(--reportsgap));
        --reportcontentwidth: 700px;
        --gallerycontentwidth: 240px;
    }
}