.container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 90px;
    align-items: center;
}

.item {
    flex: 1 1 calc(16.66% - 16px); /* default: 6 per row */
    flex: 1 1 calc(16.66% - 16px);
    box-sizing: border-box;
    min-width: 100px;
    padding: 0; /* ensure clean edges for full fills */
    position: relative;
    /*background-color: oldlace;*/
    /*border: 1px solid #ccc;*/
    /*text-align: center;*/
}

    /* Span 0.5 columns (≈ 1/12 = 8.33%) */
    .item.span-0-5 {
        flex: 1 1 calc(8.33% - 16px);
    }

    /* Span 0.75 columns (≈ 3/24 = 12.5%) */
    .item.span-0-75 {
        flex: 1 1 calc(12.5% - 16px);
    }

    /* Span 1.5 columns (≈ 3/12 = 25%) */
    .item.span-1-5 {
        flex: 1 1 calc(25% - 16px);
    }

    /* Span 2 columns (≈ 2/6 = 33.33%) */
    .item.span-2 {
        flex: 1 1 calc(33.33% - 16px);
    }

    /* Span 2.5 columns (≈ 5/12 = 33.33%) */
    .item.span-2-5 {
        flex: 1 1 calc(41.66% - 16px);
    }

    /* Span 3 columns (≈ 3/6 = 50%) */
    .item.span-3 {
        flex: 1 1 calc(50% - 16px);
    }

    /* Span 4 columns (≈ 4/6 = 66%) */
    .item.span-4 {
        flex: 1 1 calc(66% - 16px);
    }

    /* Span 4.5 columns (≈ 9/12 = 75%) */
    .item.span-4-5 {
        flex: 1 1 calc(75% - 16px);
    }

    /* Span 5 columns (≈ 10/12 = 92%) */
    .item.span-5 {
        flex: 1 1 calc(92% - 16px);
    }

    /* Span 6 columns (≈ 12/12 = 100%) */
    .item.span-6 {
        flex: 1 1 calc(100% - 16px);
    }

.background-box {
    background-color: lightblue;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    margin: 0 auto; /* same as the img */
}

/* Responsive behavior */
@media (max-width: 900px) {
    .item {
        flex: 1 1 calc(50% - 16px); /* two per row */
    }

        .item.span-2,
        .item.span-3 {
            flex: 1 1 100%; /* force full width */
        }
}

@media (max-width: 600px) {
    .item, .item.span-2, .item.span-3 {
        flex: 1 1 100%; /* one per row */
    }
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill container area, crop as needed */
    display: block;
    border-radius: 3px;
}

.item.fill-vertical {
    align-self: stretch; /* fill row vertically */
    background: lightblue; /* or your background-image */
    border-radius: 4px;
    padding: 20px;
    max-width: 100%; /* same as img */
    margin: 0 auto; /* same centering as img */
    /* give it an aspect ratio so it behaves like an image */
    /*aspect-ratio: 4 / 3;*/ /* adjust as needed */
}

.contentBT {
    max-height: 40px;
    background-color: transparent;
    right: 10px;
    top: 0px;
}

.contentHr {
    margin-top: 25px;
}

.images-grid-container {
    flex-wrap: wrap;
    /*      justify-content: center;
            align-items: flex-start;
            width: 98%;
            max-width: 895px;
            column-gap: 35px;
            row-gap: 35px;
            align-items: center;*/
}

.inspirationDiv {
    margin: 20px 15px 7px 15px;
}

    .inspirationDiv img {
        margin-bottom: 4px;
    }

    .inspirationDiv a {
        font-size: 14px;
    }