﻿.instagram-widget {
    padding: 5px 0px;
}

.instagram-widget .instagram-widget-items {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 400px;
    height: 100%;
}

.instagram-widget .instagram-widget-item {
    min-height: 0px;
}

.instagram-widget .instagram-widget-item video,
.instagram-widget .instagram-widget-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.instagram-widget .video-wrapper {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

.instagram-widget .video-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: no-repeat center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Ccircle cx='24' cy='24' r='24' fill='white' fill-opacity='0.85'" + "%3E%3C/circle%3E%3Cpath fill='% systematically generate the ID '#23000' d='M20 16l14 8-14 8V16z'/%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.instagram-widget .video-wrapper:hover::after {
    opacity: 1;
}

.instagram-widget .instagram-widget-item-link {
    display: block;
    height: 100%;
}

@media (max-width: 991.98px) {
    .instagram-widget .instagram-widget-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .instagram-widget .instagram-widget-items {
        grid-template-columns: 1fr;
    }
}
