/***********************************************************/ 
/*******************  RESPONSIVE STYLING *******************/
/********************** TILES BLOCK ************************/
/***********************************************************/ 

.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.image-wrapper:hover .hover-image {
    opacity: 1;
}

.columns-row {
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    position: relative;
}

@media (min-width: 768px) {
    .column {
        flex-basis: calc(33.33% - 0px); /* Adjust this value to manage gutter space */
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background-color: #f0f0f0; /* Placeholder background color */
        padding-bottom: calc(18% - 0px); /* Adjust this value for aspect ratio */
    }
}    

@media (max-width: 768px) {
    .column {
        flex-basis: calc(33.33% - 0px); /* Adjust this value to manage gutter space */
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background-color: #f0f0f0; /* Placeholder background color */
        padding-bottom: calc(32% - 0px); /* Adjust this value for aspect ratio */
    }
}    


/* To maintain aspect ratio for content inside each column */
.column > * {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.text-over-image {
    position: absolute;
    top: 50%; /* Position text at the center vertically */
    left: 50%; /* Position text at the center horizontally */
    transform: translate(-50%, -50%);
    z-index: 2; /* Ensure text is above the images */
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.primary-image,
.hover-image {
    width: 100%; /* Stretch the image horizontally */
    height: 100%; /* Stretch the image vertically */
    object-fit: cover; /* Maintain aspect ratio and cover entire area */
    position: absolute;
    transition: opacity 1s ease-in-out;
    top: 0;
    left: 0;
}

@media (max-width: 768px) {
    .columns-row {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        position: relative;
        flex-direction: column;
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2E2D62;
    opacity: 0.35; /* Adjust opacity for 35% transparency */
    z-index: 2; /* Ensure overlay is above the images */
}

/* FONT SIZE */

@media (min-width: 1600px) {
    h2.text-over-image-tiles {
        font-size: 28px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}


@media (min-width: 1300px) and (max-width: 1600px) {
    h2.text-over-image-tiles {
        font-size: 24px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}

@media (min-width: 1000px) and (max-width: 1300px) {
    h2.text-over-image-tiles {
        font-size: 20px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}

@media (min-width: 700px) and (max-width: 1000px) {
    h2.text-over-image-tiles {
        font-size: 20px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}

@media (max-width: 700px) {
    h2.text-over-image-tiles {
        font-size: 18px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}