/* Base grid */
.tiles-block .tiles-grid {
	display: grid;
	gap: 20px;
    margin-bottom: 80px;
}

/* Dynamic column counts */
.tiles-grid { grid-template-columns: repeat(3, 1fr); }
.tiles-count-1 .tiles-grid { grid-template-columns: repeat(1, 1fr); }
.tiles-count-2 .tiles-grid { grid-template-columns: repeat(2, 1fr); }

/* Equal height tiles */
.tiles-block .tile {
	height: 100%;
	display: flex;
	flex-direction: column;
    background: var(--light-grey);
    border-radius: var(--border-radius);
    padding: 20px 40px;
    box-sizing: border-box;
}

.tiles-block .topline {
    display: inline-block;
    padding: 5px 15px;
    background: var(--yellow);
    border-radius: 1000px;
    margin: 26px 0 0 0;
    color: var(--dark-blue);
    font-size: 14px;
}

.tiles-block .topline + .tile-title {
    margin-top: 9px;
}

.tiles-block .tile-media {
    margin-top: auto;
}

.tiles-block .tile img {
    width: calc(100% + 60px);
    height: auto;
    margin: 10px -30px -15px -30px;
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

/* Responsive override (important) */
@media (max-width: 1200px) {
	.tiles-block .tiles-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.tiles-block .tiles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tiles-block .tiles-grid {
		grid-template-columns: 1fr;
	}
}