.wooreels-grid {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    --wooreels-columns: 3;
    --wooreels-columns-tablet: 2;
    --wooreels-columns-mobile: 1;
    --wooreels-gap: 16px;
    --wooreels-gap-tablet: 14px;
    --wooreels-gap-mobile: 12px;
    --wooreels-gap-current: var(--wooreels-gap);
}

.wooreels-title {
    margin-bottom: 12px;
}

.wooreels-items {
    max-width: 100%;
    min-width: 0;
    gap: var(--wooreels-gap-current);
}

.wooreels-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--wooreels-columns), minmax(0, 1fr));
}

.wooreels-layout-justified {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--wooreels-gap-current);
}

.wooreels-layout-justified .wooreels-item {
    width: calc((100% - (var(--wooreels-columns) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns));
    flex: 0 0 calc((100% - (var(--wooreels-columns) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns));
}

.wooreels-layout-wall {
    column-count: var(--wooreels-columns);
    column-gap: var(--wooreels-gap-current);
}

.wooreels-layout-wall .wooreels-item {
    break-inside: avoid;
    margin-bottom: var(--wooreels-gap-current);
    aspect-ratio: auto;
    min-height: 0;
}

.wooreels-item {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    aspect-ratio: 9 / 16;
}

.wooreels-item iframe,
.wooreels-item video,
.wooreels-item blockquote,
.wooreels-item blockquote * {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.wooreels-item iframe,
.wooreels-item video {
    aspect-ratio: 9 / 16;
    height: auto !important;
    min-height: 0;
    max-height: none !important;
}

.wooreels-layout-wall .wooreels-item iframe,
.wooreels-layout-wall .wooreels-item video,
.wooreels-layout-wall .wooreels-item blockquote {
    min-height: 0;
}


.wooreels-item a {
    display: block;
    color: #fff;
    padding: 20px;
    word-break: break-word;
}

@media (max-width: 1024px) {
    .wooreels-grid {
        --wooreels-gap-current: var(--wooreels-gap-tablet);
    }

    .wooreels-layout-grid {
        grid-template-columns: repeat(var(--wooreels-columns-tablet), minmax(0, 1fr));
    }

    .wooreels-layout-justified .wooreels-item {
        width: calc((100% - (var(--wooreels-columns-tablet) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns-tablet));
        flex-basis: calc((100% - (var(--wooreels-columns-tablet) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns-tablet));
    }

    .wooreels-layout-wall {
        column-count: var(--wooreels-columns-tablet);
    }
}

@media (max-width: 767px) {
    .wooreels-grid {
        --wooreels-gap-current: var(--wooreels-gap-mobile);
    }

    .wooreels-layout-grid {
        grid-template-columns: repeat(var(--wooreels-columns-mobile), minmax(0, 1fr));
    }

    .wooreels-layout-justified .wooreels-item {
        width: calc((100% - (var(--wooreels-columns-mobile) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns-mobile));
        flex-basis: calc((100% - (var(--wooreels-columns-mobile) - 1) * var(--wooreels-gap-current)) / var(--wooreels-columns-mobile));
        margin-bottom: 0;
    }

    .wooreels-layout-wall {
        column-count: var(--wooreels-columns-mobile);
    }
}