.nls-general-block-a {
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.nls-general-block-a .nls-block-content {
    position: relative; /* Ensure the container can position the ::before pseudo-element */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    color: white; /* Ensures the text is visible on the gradient background */
}

.nls-general-block-a .nls-block-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #333 100%);
    z-index: 1; /* Place it above the background but behind the content */
    pointer-events: none; /* Ensure the gradient doesn't interfere with user interaction */
}


.nls-general-block-a .nls-block-container {
    gap: 24px; /* Set the gap between the blocks */
}

.nls-general-block-a .nls-block-content {
    flex: 1 1 calc(33.333% - 24px); /* Each block takes 1/3 of the row with space for gaps */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px; /* Adjust the height as per your design */
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    text-align: end;
    padding: 20px;
    color: white;
    box-sizing: border-box;
}



.nls-general-block-a .nls-block-item {
    z-index: 1;
    text-align: center;
}



/* Text and Background Colors */
.nls-general-block-a.default h1, .nls-general-block-a.default h2, .nls-general-block-a.default h3, .nls-general-block-a .default h4, .nls-general-block-a.default h5, .nls-general-block-a.default h6, .nls-general-block-a.default p, .nls-general-block-a.default a {
    color: var(--default-color);
}
.nls-general-block-a.secondary h1, .nls-general-block-a.secondary h2, .nls-general-block-a.secondary h3, .nls-general-block-a.secondary h4, .nls-general-block-a.secondary h5, .nls-general-block-a.secondary h6, .nls-general-block-a.secondary p, .nls-general-block-a.secondary a {
    color: var(--default-color);
}
.nls-general-block-a.neutral h1, .nls-general-block-a.neutral h2, .nls-general-block-a.neutral h3, .nls-general-block-a.neutral h4, .nls-general-block-a.neutral h5, .nls-general-block-a.neutral h6, .nls-general-block-a.neutral p, .nls-general-block-a.neutral a {
    color: var(--default-color);
}


/* Ensure responsiveness on smaller screens */
@media (max-width: 992px) {
    .nls-general-block-a .nls-block-content {
        flex: 1 1 calc(50% - 24px); /* 2 blocks per row on medium screens */
    }
}

@media (max-width: 768px) {
    .nls-general-block-a .nls-block-content {
        flex: 1 1 100%; /* 1 block per row on small screens */
    }
    .nls-general-block-a .nls-block-container {
        display: block;
    }
    .nls-general-block-a .nls-block-container .nls-block-content {
        margin-bottom: 50px;
    }
}