/*===================================== 
YOU CAN WRIGHT CUSTOME CSS 
======================================*/


:root {
    --ytwd: 500px;
    --ytht: calc(var(--ytwd)* 16/9);
}

.youtube-video {
    width: var(--ytwd) !important;

}


.embed-responsive-16by9{ padding-bottom: 550px !important;}





.yt-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 1 calc(var(--ytwd) - 20px); /* 25% width, minus space between items */
    margin: 10px; /* Optional: for spacing between items */
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .yt-container .item {
        flex: 1 1 calc(50% - 20px); /* 50% width on smaller screens */
    }
}

@media (max-width: 480px) {
    .yt-container .item {
        flex: 1 1 100%; /* 100% width on mobile devices */
    }
}