- aspect-ratio (to make squares evenly.)

- position: fixed;   inset: 0 0 0 20%; (top,right,bottom,left)

- background: hsl( var(--clr-white) / 0.05);  backdrop-filter: blur(1.5rem); (make frosted glass look)

- margin-block

- aria-hidden=“true” for screen readers

Aria-selected styles

HTML
          <div style="margin-bottom: 50vh">
                        <!-- Tabs -->
                        <div class="tab-list underline-indicators flex">
                            <button aria-selected="true" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Moon</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Mars</button>
                            <button aria-selected="false" class="uppercase ff-sans-cond text-accent bg-dark letter-spacing-2">Europa</button>
                        </div>
                        
CSS
.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
    color: hsl( var(--clr-white) / 1);
    border-color: hsl( var(--clr-white) / 1);
}

GRID
Responsive(?) Grid columns:

    .grid-container {
        text-align: left;
        column-gap: var(--container-gap, 2rem);
        grid-template-columns: minmax(2rem, 1fr) repeat(2, minmax(0, 30rem)) minmax(2rem, 1fr);
    }

- .grid-container * {  max-width: 45ch;}

- place-items/place-content (grid property)