.grid-container {
    /* text-align: center; */
    /* margin: auto; */
    width: 100%;
    /* padding: 10px; */
    /* margin-bottom: 10px; */
    max-height: calc(100dvh - 150px);
    /* overflow-y: auto; */
    /* background: #f00; */
    /* display: table-row; */
    /* max-height: 300px; */
}

.container {
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
}

.container *{
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.col-md-4 {
    width: 33.33333333%;
}

.border {
    border: 2px solid white;
    border-radius: 6px;
}

.background {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.height-one {
    width: 100% !important;
    margin:auto;
    border-radius: 3px;
    max-width: 480px;
    height: auto;
    overflow-y: auto;
    max-height: 342px;
}

.height-two {
    width: 50%;
    padding-top: 50%;
    position: relative;
}

.height-three {
    width: 33.3333%;
    padding-top: 33.3333%;
    position: relative;
}

.cover {
    background-color: #222;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 6px;
}

.cover-text {
    right: 0;
    left: 0;
    bottom: 0;
    color: white;
    font-size: 7%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    text-align: center;
}

.cover-text > p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*.slide {*/
/*    height: 0;*/
/*    bottom: 100%;*/
/*    transition: .5s ease;*/
/*    overflow: hidden;*/
/*    font-size: 3%;*/
/*}*/

.border:hover .slide  {
    bottom: 0;
    height: auto;
}

.border:hover .animate-text  {
    top: 62%
}

.grid-container .is-video {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.grid-container .is-video::before {
    color: #fbf8f8;
    content: "\25B6";
    opacity: 0.5;
    position: absolute;
    text-shadow: 0 3px black;
    z-index: 100;
    font-size:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
}
.grid-container .row-grid-container {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
    height: 100%;
    gap: 0.25rem;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin: unset;
    position: relative;
    max-height: calc(100dvh - 150px);
}

.grid-item i.icon-play{
    content: "";
    position: absolute;
    background: url("../images/play.png") no-repeat center;
    background-size: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.grid-container .grid-lenght-1 {
    grid-template-columns: repeat(1, 1fr);
    overflow-y: auto;
}

.grid-container .grid-lenght-1 .grid-item{
    grid-column: 1;
    grid-row: 1;
}
.grid-container .grid-lenght-1 .grid-item img{
    max-height: calc(100dvh - 150px);
}
.grid-container .grid-lenght-1 .grid-item video{}
.grid-container .grid-lenght-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-container .grid-lenght-2 .grid-item{
    grid-row: 1;
}
.grid-container .grid-lenght-2 .grid-item img{}
.grid-container .grid-lenght-2 .grid-item video{}
.grid-container .grid-lenght-3 {}
.grid-container .grid-lenght-3 .grid-item.img_3_1{
    /* height: calc(100dvh - 50dvh); */
    height: 100%;
    max-height: calc(100dvh - 150px);
}
.grid-container.grilLeft .grid-lenght-3 .grid-item.img_3_1{
    max-height: unset;
}

.grid-container .grid-lenght-3 .grid-item.img_3_1 img{}
.grid-container .grid-lenght-3 .grid-item{}
.grid-container .grid-lenght-3 .grid-item img{}
.grid-container .grid-lenght-3 .grid-item video{}
.grid-container .grid-lenght-4 {}
.grid-container .grid-lenght-4 .grid-item{
    /* border: 1px solid #f00; */
}
.grid-container .grid-lenght-4 .grid-item img{
    /* max-height: calc(100dvh - 150px); */
}
.grid-container .grid-lenght-4 .grid-item video{}
.grid-container .grid-lenght-5 {}
.grid-container .grid-lenght-5 .grid-item{}
.grid-container .grid-lenght-5 .grid-item img{}
.grid-container .grid-lenght-5 .grid-item video{}
.grid-container.grilLeft .grid-lenght-4 .grid-item, .grid-container.grilRight .grid-lenght-4 .grid-item{
    /* max-height: 20dvh; */
}
.grid-container.grilLeft .grid-lenght-4 img, .grid-container.grilRight .grid-lenght-4 img{
    /* max-height: 30%; */
}
.grid-container.grilLeft .grid-lenght-4 .img_4_1, .grid-container.grilRight .grid-lenght-4 .img_4_1{
    max-height: calc(100dvh - 150px);
}
.grid-container.grilLeft .grid-lenght-4 .img_4_1 img, .grid-container.grilRight .grid-lenght-4 .img_4_1 img{
    /* max-height: calc(100dvh - 150px); */
}
.grid-item{
    height: 100%;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    object-fit: cover;
    position: relative;
    /* display: flex; */
}
.grid-item video , .grid-item img {
    height: 100%;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    object-fit: cover;
}
.sub_grid_wrapper_first_row {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
    height: 66.66%;
    gap: 0.25rem;
}
.sub_grid_wrapper_second_row {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
    height: 33.33%;
    gap: 0.25rem;
}
.sub_grid_wrapper_3_img {
    grid-template-columns: repeat(3, 1fr);
    /* max-height: 26px; */
}
.show_more_img {
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 0.5;
    position: relative;
    cursor: pointer;
}
.show_more_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
}
.img_1_1 {
    grid-column: 1;
    grid-row: 1;
}

.img_2_1 {
    grid-column: 1/2;
    grid-row: 1;
}
.img_2_2 {
    grid-column: 2;
    grid-row: 1;
}

.img_3_1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.img_3_2 {
    grid-row: 3;
    grid-column: 1 / 2;
}
.img_3_3 {
    grid-row: 3;
    grid-column: 2 / 3;
}

.img_4_1 {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.img_4_2 {
    grid-row: 3;
    grid-column: 1 / 2;
}
.img_4_3 {
    grid-row: 3;
    grid-column: 2 / 3;
}
.img_4_4 {
    grid-row: 3;
    grid-column: 3;
}

.img_5_1 {
    grid-column: 1 / 3;
    grid-row: 1/3;
}

.img_5_2 {
    grid-row: 1;
    grid-column: 3/5;
}

.img_5_3 {
    grid-row: 3;
    grid-column: 1 / 2;
}
.img_5_4 {
    grid-row: 3;
    grid-column: 2/3;
}
.img_5_5 {
    grid-row: 3;
    grid-column: 3/5;
}

.sub_img_3_1 {
    grid-column: 1 / 2;
    grid-row: 2;
}

.sub_img_3_2 {
    grid-column: 2 / 3;
    grid-row: 2;
}
.sub_img_3_3 {
    grid-column: 3;
    grid-row: 2;
}

.grilLeft {
    .img_3_1 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .img_3_2 {
        grid-row: 1/2;
        grid-column: 3 / 4;
    }
    .img_3_3 {
        grid-row: 2 / 3;
        grid-column: 3 / 4;
    }

    .img_4_1 {
        grid-column: 1 / 3;
        grid-row: 1 / 4;
    }

    .img_4_2 {
        grid-row: 1/2;
        grid-column: 3 / 4;
    }
    .img_4_3 {
        grid-row: 2/3;
        grid-column: 3 / 4;
    }
    .img_4_4 {
        grid-row: 3/4;
        grid-column: 3 / 4;
        /* overflow: hidden; */
        /* border: 1px solid; */
    }
}

.grilRight {
    .img_3_1 {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }

    .img_3_2 {
        grid-row: 1/2;
        grid-column: 1 / 2;
    }
    .img_3_3 {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .img_4_1 {
        grid-column: 2 / 4;
        grid-row: 1 / 4;
    }

    .img_4_2 {
        grid-row: 1/2;
        grid-column: 1 / 2;
    }
    .img_4_3 {
        grid-row: 2/3;
        grid-column: 1 / 2;
    }
    .img_4_4 {
        grid-row: 3/4;
        grid-column: 1 / 2;
    }
}
@media screen and (max-width: 820px) {
    .feed-item .grid-item video, .feed-item .grid-item img {
        max-height: calc(100dvh - 150px);
        /* min-height: 310px; */
        object-fit: cover;
    }
    .feed-item-media-grid {
        /* max-height: calc(100dvh - 150px); */
        /* border: 1px solid #f00; */
    }
    .grid-container .grid-lenght-4 .grid-item.img_4_1 img{

    }
}

@media screen and (max-width: 480px) {
    .grid-container .grid-lenght-4 .grid-item.img_4_1 img{
        max-height: calc(100dvh/2);
    }
    .grid-container .grid-lenght-3 .grid-item.img_3_1 img{
        max-height: calc(100dvh/2);
    }
    .grid-container.grilRight .grid-lenght-3 .grid-item.img_3_1 img, .grid-container.grilLeft .grid-lenght-3 .grid-item.img_3_1 img {
        max-height: calc(100dvh - 150px);
    }

}