.activity__results {
    display: grid;
    gap: 1rem;

    .activity__controls {
        width: 100%;
        padding: 0.5rem;
        display: flex;
        justify-content: center;

        output {
            font-size: 1.5rem;
            text-transform: uppercase;
        }
    }

    .results {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;

        @media (min-width: 50em) { grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr)); }

        .empty {
            display: flex;
            text-align: center;
            background-color: #f8f9fa;
            border: 1px dashed #dee2e6;
        }
    }
}