.grid-cluster-container {
    display: grid;
    min-height: 100vh;
}

.grid-cluster-container .grid-item {
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    gap: 25px;
    overflow: hidden;
}

.grid-cluster-container .grid-item .background-image {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    transform: scale(1);
    transition: transform 0.4s ease;
}

.grid-cluster-container .grid-item .background-overlay {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.56;
    transition: opacity 0.4s ease;
}

.grid-cluster-container .grid-item:hover .background-overlay {
    opacity: 0.75;
}

.grid-cluster-container .grid-item:hover .background-image {
    z-index: -1;
    transform: scale(1.1);
}

.grid-cluster-container .grid-item .title-wrapper,
.grid-cluster-container .grid-item .address-container {
    text-align: center;
}

.grid-cluster-container .grid-item .title,
.grid-cluster-container .grid-item .subtitle {
    font-size: clamp(22px, 2.5vw, 24px);
}

.grid-cluster-container .grid-item .the-button {
    color: white;
    border: 2px solid white;
    border-radius: 100vw;
    text-transform: uppercase;
    font-size: 16px;
    padding: 15px 50px;
    text-decoration: none;
    transition: color 0.4s ease, background 0.4s ease;
}
.grid-cluster-container .grid-item .the-button:hover {
    border: 2px solid white;
    text-decoration: none;
    background: white;
    color: black;
}

@media screen and (min-width: 768px) {
    .grid-cluster-container .grid-item {
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 50px;
        gap: 25px;
        overflow: hidden;
    }

    .grid-cluster-container[data-grid-items="1"],
    .grid-cluster-container[data-grid-items="3"],
    .grid-cluster-container[data-grid-items="5"],
    .grid-cluster-container[data-grid-items="7"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cluster-container[data-grid-items="1"] .grid-item:last-child,
    .grid-cluster-container[data-grid-items="3"] .grid-item:last-child,
    .grid-cluster-container[data-grid-items="5"] .grid-item:last-child,
    .grid-cluster-container[data-grid-items="7"] .grid-item:last-child {
        grid-column: span 2;
    }

    .grid-cluster-container[data-grid-items="2"],
    .grid-cluster-container[data-grid-items="4"],
    .grid-cluster-container[data-grid-items="6"],
    .grid-cluster-container[data-grid-items="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .grid-cluster-container .grid-item {
        position: relative;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 150px 80px;
        gap: 25px;
        overflow: hidden;
    }

    .grid-cluster-container[data-grid-items="1"] {
        grid-template-columns: auto;
    }

    .grid-cluster-container[data-grid-items="2"],
    .grid-cluster-container[data-grid-items="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cluster-container[data-grid-items="3"],
    .grid-cluster-container[data-grid-items="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
	
    .grid-cluster-container[data-grid-items="8"] {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-cluster-container[data-grid-items="5"],
    .grid-cluster-container[data-grid-items="7"] {
        grid-template-columns: repeat(6, 1fr);
    }

    /* First Three Items */
    .grid-cluster-container[data-grid-items="5"] .grid-item:nth-child(-n + 3) {
        grid-column: span 2;
    }
	/* First 6 Items */
	.grid-cluster-container[data-grid-items="7"] .grid-item:nth-child(-n + 6) {
        grid-column: span 2;
	}

    /* Last Two Items */
    .grid-cluster-container[data-grid-items="5"] .grid-item:nth-last-child(-n + 2) {
        grid-column: span 3;
    }

    .grid-cluster-container[data-grid-items="1"] .grid-item:last-child,
    .grid-cluster-container[data-grid-items="3"] .grid-item:last-child {
        grid-column: span 1;
    }
	
	.grid-cluster-container[data-grid-items="7"] .grid-item:last-child {
        grid-column: span 6;
	}
}