Make an element respond to its container size rather than the viewport:

1. Define (.card-container) as a query container (container-type: inline-size).
2. Use `@container` to change the child (.card) background to red if the container is under 300px wide.

.card-container {
    container-type: inline-size;
}

@container (max-width: 300px) {
    .card {
        background-color: red;
    }
}

Organize CSS priority using layers:

1. Define layers in this order: base, components, utilities.
2. Add a rule in `base` that makes text blue.
3. Add a rule in `utilities` that makes text red (it should win because it's later).

@layer base, components, utilities;

@layer base {
    p { color: blue; }
}

@layer utilities {
    p { color: red; } /* this wins */
}

Use logical properties to support LTR/RTL:

1. Instead of `margin-left`, use the logical inline start property.
2. Instead of `padding-top`, use the logical block start property.

.box {
    margin-inline-start: 20px; /* left in LTR, right in RTL */
    padding-block-start: 10px; /* top */
}

Use modern CSS nesting (no preprocessor):

1. Inside `.card`, style the child `.title`.
2. In the same rule, use `&` to style the card hover state.

.card {
    background: white;
    
    .title {
        font-weight: bold;
    }
    
    &:hover {
        background: gray;
    }
}

Make font size responsive with clamp():

1. Use `clamp()` for the font size.
2. Minimum: 1rem.
3. Preferred: 2.5vw (responsive to viewport width).
4. Maximum: 2rem.

h1 {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

Make a child inherit the parent's grid:

1. You have a parent `.grid` defined as a grid.
2. A child `.item` spans 3 columns.
3. Make the child a grid whose columns follow the parent's columns using `subgrid`.

.item {
    display: grid;
    grid-template-columns: subgrid;
}

Control box dimensions:

1. Make the element always maintain a 16:9 ratio.
2. Regardless of its changing width.

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
}

Customize the scrollbar (modern browsers):

1. Make the scrollbar thin.
2. Set the thumb color to blue and the track to transparent.

/* Standard property */
html {
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}

Perform calculations for values:

1. Set the element width to 100% minus 50px.
2. This is useful when combining different units.

.sidebar {
    width: calc(100% - 50px);
}

Select the parent based on its child state:

1. Select (.card) only if it contains an image (img).
2. Give the card a red border.

.card:has(img) {
    border: 2px solid red;
}