.my-blocks-child-pages-grid {
    --my-blocks-grid-min: 180px;
    --my-blocks-grid-gap: 16px;
    --my-blocks-grid-max-columns: 5;
    --my-blocks-grid-column-min: calc(20% - 12.8px);
    --my-blocks-grid-radius: 14px;
    --my-blocks-overlay-rgb: 0, 0, 0;
    --my-blocks-overlay-color: #000000;
    --my-blocks-overlay-opacity: 55;
    --my-blocks-overlay-top-opacity: 10;
    --my-blocks-title-offset: 16px;
    --my-blocks-tile-min-height: 250px;
    --my-blocks-tile-align-items: center;
    --my-blocks-tile-justify-content: center;
    --my-blocks-tile-text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--my-blocks-grid-min), 1fr));
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, max(var(--my-blocks-grid-min), var(--my-blocks-grid-column-min))), 1fr)
    );
    gap: var(--my-blocks-grid-gap);
}

.my-blocks-child-pages-grid__item {
    position: relative;
    display: flex;
    align-items: var(--my-blocks-tile-align-items);
    justify-content: var(--my-blocks-tile-justify-content);
    aspect-ratio: 1 / 1;
    min-height: var(--my-blocks-tile-min-height);
    padding: 16px;
    border-radius: var(--my-blocks-grid-radius);
    background-color: #e2e2e2;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    text-align: var(--my-blocks-tile-text-align);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.my-blocks-child-pages-grid__item:hover,
.my-blocks-child-pages-grid__item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: #fff;
}

.my-blocks-child-pages-grid__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--my-blocks-overlay-rgb), calc(var(--my-blocks-overlay-top-opacity) / 100)) 0%,
        rgba(var(--my-blocks-overlay-rgb), calc(var(--my-blocks-overlay-opacity) / 100)) 100%
    );
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--my-blocks-overlay-color) calc(var(--my-blocks-overlay-top-opacity) * 1%), transparent) 0%,
        color-mix(in srgb, var(--my-blocks-overlay-color) calc(var(--my-blocks-overlay-opacity) * 1%), transparent) 100%
    );
}

.my-blocks-child-pages-grid__title {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    margin-bottom: var(--my-blocks-title-offset);
}

.my-blocks-child-pages-grid__item:visited,
.my-blocks-child-pages-grid__item:hover,
.my-blocks-child-pages-grid__item:focus,
.my-blocks-child-pages-grid__item:active {
    color: #fff;
}

.my-blocks-child-pages-grid__empty {
    padding: 12px;
    border: 1px dashed #c8c8c8;
    color: #666;
    font-style: italic;
}

@media (max-width: 767px) {
    .my-blocks-child-pages-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .my-blocks-child-pages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}