.metadata-grid-container {
    container-type: inline-size;
    container-name: metadata-grid-container;
}

.metadata-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.metadata-grid .card {
    flex-wrap: nowrap;
}

.metadata-cpu-card        { order: 1; }
.metadata-memory-card     { order: 2; }
.metadata-difficulty-card { order: 3; }
.metadata-links-card      { order: 4; }
.metadata-downloads-card  { order: 5; }
.metadata-license-card    { order: 6; }

@container metadata-grid-container (max-width: 515px) {
    .metadata-grid {
        grid-template-columns: 1fr 1fr;
    }

	/* Swap place of links- and downloads-card */
	.metadata-cpu-card        { order: 1; }
	.metadata-memory-card     { order: 2; }
	.metadata-difficulty-card { order: 3; }
	.metadata-downloads-card  { order: 4; }
	.metadata-links-card      { order: 5; }
	.metadata-license-card    { order: 6; }
}

@container metadata-grid-container (max-width: 335px) {
    .metadata-grid {
        grid-template-columns: 1fr;
    }

	/* Same order as in 3-column mode */
}

.favourite-problem-btn {
    position: absolute;
    top: 14px;
    left: 18px;
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--font-xlarge);
    color: var(--background-gradient-start);
}

.favourited-problem {
    color: var(--color-gold);
}