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

.image-wrappertilestext{
    background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.445), rgba(24, 24, 66, 0.87));
}


h2.text-over-imagetilestextsecond{
    padding-left: 100px;
    padding-right: 100px;
}

/* Apply the initial opacity and scale to the image */
.columns-containertilestext .columns-rowtilestext .columntilestext .image-link .image-containertilestext .image-wrappertilestext .primary-imagetilestext {
    opacity: 0.4;
    transform: scale(1); /* Initial scale */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Adds a smooth transition effect for both opacity and scale */
}

/* Target the parent element for hover effect */
.columns-containertilestext .columns-rowtilestext .columntilestext .image-link:hover .image-containertilestext .image-wrappertilestext .primary-imagetilestext {
    opacity: 1;
    transform: scale(1.1); /* Zoom effect on hover */
}



@media (min-width: 1600px) {
    .columns-rowtilestext .columntilestext h2.text-over-imagetilestextsecond {
        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) {
    .columns-rowtilestext .columntilestext h2.text-over-imagetilestextsecond {
        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) {
    .columns-rowtilestext .columntilestext h2.text-over-imagetilestextsecond {
        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) {
    .columns-rowtilestext .columntilestext h2.text-over-imagetilestextsecond {
        font-size: 20px;
        font-family: 'Moderat Extended Bold', 'Roboto Bold';
        line-height: 1.2;
        text-align: center;
    }      
}

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

@media (min-width: 700px) {
    .columns-rowtilestext {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        position: relative;
        background-color: #2e2d62;
    }      
}

/* Hide the primary image by default */

@media (max-width: 700px) {
    .columns-rowtilestext {
        display: flex;
        flex-wrap: wrap;
        cursor: pointer;
        position: relative;
        background-color: #2e2d62;
        flex-direction: column;
    }      
}


@media (min-width: 700px) {
.columntilestext {
    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: 700px) {
    .columntilestext {
        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 */
.columntilestext > * {
    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-containertilestext {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.primary-imagetilestext,
.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;
}