/* external.css */
@import url(../Stylesheets/Core.css);
@import url(../Stylesheets/Variables.css);

/* External page-specific styles */
div.home-tiles > div:nth-child(1) {
    width: 12%;
    margin-left: 8%;
    margin-right: 2%;
    line-height: 110%;
}

div.home-tiles > div:nth-child(2),
div.home-tiles > div:nth-child(3),
div.home-tiles > div:nth-child(4),
div.home-tiles > div:nth-child(5),
div.home-tiles > div:nth-child(6),
div.home-tiles > div:nth-child(7) {
    width: 12%;
    margin-left: auto;
    margin-right: 2%;
    line-height: 110%;
}

div.home-tiles > div:hover {
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16), 0 12px 18px rgba(0, 0, 0, 0.23);
    transform: scale(1.05);
}

.title-bar-layout
{
	display: block;
}

@media (max-width: 1800px) and (min-width: 851px) {
    div.home-tiles {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    div.home-tiles > div {
        width: 28% !important;   /* 3 tiles per row with margins */
        margin: 1% !important;
    }
}

/* Mobile view: stack tiles vertically */
@media (max-width: 850px) {
    div.home-tiles {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div.home-tiles > div {
        width: 80% !important;
        margin: 10px 0 !important;
    }
}