.portfolio__item__video {
    height: 200px; /* Adjust this height as needed */
    width: 100%; /* Full width */
    overflow: hidden; /* Hide any overflow */
}
.portfolio__item__video img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the entire image is visible while preserving aspect ratio */
}

/* ----- */

@media screen and (min-device-width: 375px) and (max-device-height: 667px) {
    .portfolio__item__video {
        height: 200px;
        width: 100%;
        background-size: contain;
    }
}


/* - */

@media screen and (min-device-width: 320px) and (max-device-height: 480px) {
    .portfolio__item__video {
        height: 163px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 320px) and (max-device-height: 740px) {
    .portfolio__item__video {
        height: 182px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 360px) and (max-device-height: 740px) {
    .portfolio__item__video {
        height: 182px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 390px) and (max-device-height: 844px) {
    .portfolio__item__video {
        height: 203px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 430px) and (max-device-height: 932px) {
    .portfolio__item__video {
        height: 225px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 412px) and (max-device-height: 915px) {
    .portfolio__item__video {
        height: 215px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 414px) and (max-device-height: 896px) {
    .portfolio__item__video {
        height: 216px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 428px) and (max-device-height: 926px) {
    .portfolio__item__video {
        height: 224px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 768px) and (max-device-height: 1024px) {
    .portfolio__item__video {
        height: 186px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 820px) and (max-device-height: 1180px) {
    .portfolio__item__video {
        height: 186px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 1024px) and (max-device-height: 1366px) {
    .portfolio__item__video {
        height: 163px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 912px) and (max-device-height: 1368px) {
    .portfolio__item__video {
        height: 186px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 540px) and (max-device-height: 720px) {
    .portfolio__item__video {
        height: 287px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 344px) and (max-device-height: 882px) {
    .portfolio__item__video {
        height: 174px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 853px) and (max-device-height: 1280px) {
    .portfolio__item__video {
        height: 186px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 1024px) and (max-device-height: 600px) {
    .portfolio__item__video {
        height: 163px;
        width: 100%;
        background-size: contain;
    }
}

@media screen and (min-device-width: 1280px) and (max-device-height: 800px) {
    .portfolio__item__video {
        height: 203px;
        width: 100%;
        background-size: contain;
    }
}

/* ----- */