.portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 6rem 0;
}

.portfolio__box {
    border-radius: 15px;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
    position: relative;
    overflow: hidden;

    height: 18rem;
    margin: 2rem 1rem;
    width: 32rem;
}

.portfolio__video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1536px) {

}

@media (max-width: 1280px) {
    .portfolio__box {
        height: 16rem;
        width: 28rem;
    }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    .portfolio__box {
        margin: 0.8rem 0.25rem;
    }
}

@media (max-width: 640px) {
}

@media (max-width: 475px) {
    .portfolio__box {
        height: 12rem;
        width: 21rem;
    }
}

@media (max-width: 369px) {
    .portfolio__box {
        height: 10rem;
        width: 18rem;
    }
}