body {
    background-color: #050505;
    margin-bottom: 4rem;
}

.content {
    width: 58%;
    margin: auto;
}

#video {
    font-size: 12px;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: black;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box-logo {
    margin: 0.75rem 0.5rem;
    width: 11%;
    min-width: 100px;
    background-color: #141415;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    aspect-ratio: 480/270;
    border: 2px solid black;
}

/* .box-logo:active {
    opacity: 0.4;
} */

.box-logo.active {
    border: 2px solid orange;
}

.logo {
    width: 100%;
    object-fit: cover;
    /* Firefox */
    image-rendering: -moz-crisp-edges;
    /* Opera */
    image-rendering: -o-crisp-edges;
    /* Safari */
    image-rendering: -webkit-optimize-contrast;
    /* CSS3 Proposed */
    image-rendering: optimize-contrast;
    /* IE8+ */
    -ms-interpolation-mode: nearest-neighbor;
}

video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

@media only screen and (max-width: 600px) {
    .content {
        width: 100%;
    }

    .box-logo {
        margin: 0.5rem 0.25rem;
    }
}