.comp--slide--font-tester {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    margin: 0 var(--viewport-margin);
  }

@media (min-width: 900px) {
    .comp--slide--font-tester {
        display: grid;
    
        min-height: var(--size-3xl);
        margin-right: var(--viewport-margin);
        margin-left: var(--viewport-margin);
    
        grid-template-rows: auto;

        grid-template-columns: var(--grid-template-columns);
    
        grid-template-areas: 
        "font-controls-panel font-controls-panel font-preview font-preview font-preview font-preview font-preview font-preview font-preview font-preview font-preview font-preview";
    
        grid-column-gap: var(--column-gap);
        grid-row-gap: var(--row-gap);
        grid-auto-columns: 1fr;
        grid-auto-flow: dense;
    
        align-content: stretch;
        align-items: center;
    
    }

    .comp--font-preview-panel {
        grid-area: font-preview;
    }
    .comp--font-controls-panel {
        grid-area: font-controls-panel;
    }
}