#image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

.item {
    position: relative;
}

.item video,
.item img {
    position: relative;
    object-fit: contain;
    width: 192px;
    height: 192px;
}

.controls {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 24px;
    height: 24px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(32, 32, 32, 0.56);

    border: none;
    border-radius: 50%;

    cursor: pointer;
    z-index: 2;

    opacity: 0;
    transition: 0.2s;
}

.video:hover .controls {
    opacity: 1;
}

.progress-circle {
    position: absolute;
    width: 32px;
    height: 32px;
}

.progress-circle .progress {
    fill: none;
    stroke-width: 2;
    stroke: #9AA0A4;
    stroke-linecap: round;
    stroke-dasharray: 126; /* 2 * π * r (r=20) */
    stroke-dashoffset: 126;
    transition: stroke-dashoffset 0.1s linear;

}

@media (max-width: 1152px) {
    #image-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 928px) {
    #image-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 704px) {
    #image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    #image-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.carroussel {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;

    position: fixed;
    top: 0;
    left: 0;

    width: calc(100%);
    height: calc(100%);

    z-index: 100;
}

#carroussel-title, #carroussel-description {
    color: var(--base-grey-50);
    font-size: 16px;
}

#carroussel-date {
    font-family: "geist-custom", serif;
    color: var(--base-grey-50);
    font-size: 12px;
}

#carroussel-image, #carroussel-video {
   height: 582px;
   position: relative;
   border-radius: 0;
}

#carroussel-description {
    max-width: 382px;
}

.carroussel-close-button {
    position: absolute;
    top: 32px;
    right: 32px;
}