/* Custom Tiles Styles for Ludiglass */

/* Layout: 2 tiles per row (50% width each) */
.tiles article {
    width: 50% !important;
}

/* Custom colors for each tile - with higher specificity */
.tiles article.tile-1:before {
    background-color: #043E63 !important;
}

.tiles article.tile-2:before {
    background-color: #00CECE !important;
}

.tiles article.tile-3:before {
    background-color: #CCF6F6 !important;
}

.tiles article.tile-4:before {
    background-color: #0D9DF7 !important;
}

.tiles article.tile-5:before {
    background-color: #096BA8 !important;
}

.tiles article.tile-6:before {
    background-color: #007777 !important;
}

/* Additional specificity to override original colors */
#main .tiles article.tile-1:before {
    background-color: #043E63 !important;
}

#main .tiles article.tile-2:before {
    background-color: #00CECE !important;
}

#main .tiles article.tile-3:before {
    background-color: #CCF6F6 !important;
}

#main .tiles article.tile-4:before {
    background-color: #0D9DF7 !important;
}

#main .tiles article.tile-5:before {
    background-color: #096BA8 !important;
}

#main .tiles article.tile-6:before {
    background-color: #007777 !important;
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
    .tiles article {
        width: 50% !important;
    }
}

@media screen and (max-width: 736px) {
    /* High specificity rules for mobile */
    .tiles article,
    #main .tiles article,
    .tiles article:nth-child(4n - 1), 
    .tiles article:nth-child(4n - 2) {
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    /* Ensure all tiles are 100% width on very small screens */
    .tiles article,
    #main .tiles article,
    .tiles article:nth-child(4n - 1), 
    .tiles article:nth-child(4n - 2) {
        width: 100% !important;
    }
}

@media screen and (max-width: 360px) {
    /* Extra small screens */
    .tiles article,
    #main .tiles article,
    .tiles article:nth-child(4n - 1), 
    .tiles article:nth-child(4n - 2) {
        width: 100% !important;
    }
}

/* Override the original nth-child selectors for desktop only */
@media screen and (min-width: 981px) {
    .tiles article:nth-child(4n - 1), 
    .tiles article:nth-child(4n - 2) {
        width: 50% !important;
    }
}

/* Override the original color selectors with higher specificity */
.tiles article:nth-child(6n - 5):before {
    background-color: transparent !important;
}

.tiles article:nth-child(6n - 4):before {
    background-color: transparent !important;
}

.tiles article:nth-child(6n - 3):before {
    background-color: transparent !important;
}

.tiles article:nth-child(6n - 2):before {
    background-color: transparent !important;
}

.tiles article:nth-child(6n - 1):before {
    background-color: transparent !important;
}

.tiles article:nth-child(6n):before {
    background-color: transparent !important;
}