/* Comment describing the rule */
.container {
    /* Property: Value pairs */
    display: flex;
    padding: 20px;
    background-color: #f0f0f0;
}

/* Multiple selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

/* Universal - affects all elements */
* { box-sizing: border-box; }

/* Element selector */
p { color: #333; }

/* Class selector */
.alert { background: yellow; }

/* ID selector */
#main-nav { position: fixed; }

/* Multiple classes */
.btn.primary { background: blue; }

/* Element with class */
button.submit { font-weight: bold; }

/* Descendant - any level */
.container p { padding: 10px; }

/* Direct child only */
nav > ul { list-style: none; }

/* Adjacent sibling - immediately after */
label + input { margin-left: 10px; }

/* General siblings - all after */
h2 ~ p { color: gray; }

/* Complex combination */
article > header + section p { line-height: 1.6; }

/* Has attribute */
input[required] { border-color: red; }

/* Exact value */
input[type="email"] { background: #f0f0f0; }

/* Starts with */
a[href^="https://"] { color: green; }
a[href^="http://"] { color: orange; }

/* Ends with */
a[href$=".pdf"]::after { content: " (PDF)"; }

/* Contains */
img[src*="thumbnail"] { width: 100px; }

/* Case insensitive */
[data-state="active" i] { font-weight: bold; }

/* Multiple attributes */
input[type="text"][required] { border: 2px solid red; }

/* User interaction pseudo-classes */
a:hover { color: blue; }
button:active { transform: scale(0.95); }
input:focus { outline: 2px solid blue; }

/* Structural pseudo-classes */
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f0f0f0; }
tr:nth-child(odd) { background: white; }
p:not(.special) { color: gray; }

/* Form state pseudo-classes */
input:disabled { opacity: 0.5; }
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Pseudo-elements */
.quote::before { content: "❝"; }
.quote::after { content: "❞"; }
p::first-letter { font-size: 2em; float: left; }
::selection { background: yellow; color: black; }

/* Specificity: 0,0,1 */
p { color: black; }

/* Specificity: 0,1,0 - wins over above */
.text { color: blue; }

/* Specificity: 0,1,1 - wins over .text */
p.text { color: green; }

/* Specificity: 1,0,0 - wins over all above */
#main { color: red; }

/* !important overrides specificity */
p { color: purple !important; } /* Wins over everything */

/* Equal specificity - last rule wins */
.box { color: blue; }
.box { color: red; } /* This applies */

/* Traditional approach - verbose */
header a:hover,
footer a:hover,
aside a:hover {
    color: blue;
}

/* Using :is() - much shorter */
:is(header, footer, aside) a:hover {
    color: blue;
}

/* Specificity example */
:is(#id, .class) { } /* Specificity: 1,0,0 (from #id) */
:where(#id, .class) { } /* Specificity: 0,0,0 */

/* Library/framework base styles with 0 specificity */
:where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-weight: bold;
}

/* User styles easily override without !important */
h1 { margin: 20px 0; } /* Overrides above */

/* Use case: default styles that are easy to override */
:where(.btn) {
    padding: 10px;
    border: none;
}
.btn { padding: 20px; } /* Easily overrides */

/* Style parent based on child */
article:has(> img) {
    display: grid;
}

/* Form with invalid input */
form:has(input:invalid) {
    border: 2px solid red;
}

/* Card with .featured class inside */
.card:has(.featured) {
    background: gold;
}

/* List item containing link */
li:has(> a) {
    cursor: pointer;
}

/* Previous sibling selector (works with :has) */
li:has(+ li:hover) {
    color: blue;
}

/* Conditional layout */
section:has(> .sidebar) {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

/* All paragraphs except .special */
p:not(.special) {
    color: gray;
}

/* Multiple negations (CSS4) */
button:not(.primary):not(.secondary) {
    background: white;
}

/* Not with attribute */
input:not([type="submit"]) {
    border: 1px solid gray;
}

/* Complex negation */
li:not(:first-child):not(:last-child) {
    border-top: 1px solid #ddd;
}

/* Absolute */
.box { width: 300px; } /* Fixed size */

/* Font-relative */
.text { 
    font-size: 1.5rem;    /* 24px if root is 16px */
    padding: 1em;         /* 24px (relative to own font-size) */
    margin-bottom: 2rem;  /* 32px (relative to root) */
}

/* Viewport units */
.hero { height: 100vh; }    /* Full viewport height */
.banner { width: 100vw; }   /* Full viewport width */
.square { width: 50vmin; height: 50vmin; } /* Square */

/* Font-based */
input { width: 20ch; }  /* ~20 characters wide */

/* New viewport units for mobile */
.mobile-hero {
    height: 100dvh;  /* Dynamic - handles browser UI */
}

/* Traditional formats */
.hex { color: #ff0000; }
.rgb { color: rgb(255 0 0); }
.rgba { color: rgb(255 0 0 / 0.5); }
.hsl { color: hsl(0 100% 50%); }
.hsla { color: hsl(0 100% 50% / 0.5); }

/* Modern formats - better for manipulation */
.hwb { color: hwb(0 0% 0%); }  /* Pure red */
.lch { color: lch(50% 70 40); } /* Perceptual uniformity */
.oklch { color: oklch(0.6 0.25 30); } /* Best for gradients */

/* Wide gamut colors */
.p3 { color: color(display-p3 1 0 0); } /* Vivid red */
.rec2020 { color: color(rec2020 1 0 0); }

/* Transparent keyword */
.transparent { background: transparent; }

/* currentColor - inherits text color */
.border { border: 2px solid currentColor; }

/* Global variables in :root */
:root {
    --primary-color: #007acc;
    --secondary-color: #ff6600;
    --spacing-unit: 8px;
    --font-size-base: 16px;
    --border-radius: 4px;
}

/* Using variables */
.button {
    background: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

/* Scoped variables */
.dark-theme {
    --primary-color: #4fc3f7;
    --bg-color: #1e1e1e;
}

/* Fallback values */
.card {
    padding: var(--card-padding, 20px); /* 20px if not defined */
}

/* Nested var() */
.element {
    --size: 100px;
    --half: calc(var(--size) / 2);
    width: var(--half); /* 50px */
}

/* Mixed unit calculations */
.container {
    width: calc(100% - 40px);
    height: calc(100vh - 60px);
    padding: calc(1rem + 10px);
}

/* With variables */
.responsive {
    --header-height: 60px;
    --footer-height: 40px;
    height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* Complex expressions */
.grid {
    width: calc((100% - 3 * 10px) / 4); /* 4 columns with 10px gaps */
}

/* Negative values */
.offset {
    margin-left: calc(-1 * var(--spacing));
}

/* Nested calc (auto-flattened) */
.element {
    width: calc(calc(100% / 3) - 20px);
}

/* min() - maximum constraint */
.container {
    width: min(100%, 1200px); /* Never wider than 1200px */
    padding: min(5vw, 40px);  /* Responsive but capped */
}

/* max() - minimum constraint */
.button {
    font-size: max(16px, 1vw); /* Never smaller than 16px */
    padding: max(10px, 1em);
}

/* clamp() - fluid between bounds */
.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* Min: 1.5rem, Ideal: 5vw, Max: 3rem */
}

.responsive-spacing {
    margin: clamp(1rem, 3vw, 3rem);
    padding: clamp(0.5rem, 2vw, 2rem);
}

/* Combining functions */
.card {
    width: clamp(200px, 50%, 500px);
    padding: max(1rem, 2vw);
    gap: min(20px, 3%);
}

/* round() function */
.grid-item {
    /* Round to nearest 10px */
    width: round(nearest, 23.7px, 10px); /* = 20px */
    
    /* Round up */
    height: round(up, 43px, 10px); /* = 50px */
    
    /* Round down */
    margin: round(down, 47px, 10px); /* = 40px */
}

/* mod() for cyclic patterns */
.item {
    /* Alternate colors every 3 items */
    --index: 5;
    --cycle: mod(var(--index), 3); /* = 2 (5 % 3) */
}

/* rem() for remainder */
.pattern {
    --offset: rem(127px, 50px); /* = 27px */
}

/* abs() for absolute values */
.transform {
    --distance: abs(-50px); /* = 50px */
}

/* Practical example: snap to grid */
.snap-grid {
    width: round(nearest, var(--dynamic-width), 20px);
    height: round(nearest, var(--dynamic-height), 20px);
}

/* Define container */
.container {
    container-type: inline-size;
    /* or: size (both dimensions) */
    /* or: normal (default, no containment) */
    container-name: card; /* Optional name */
}

/* Use container query units inside */
.card-title {
    font-size: clamp(1rem, 5cqw, 2rem);
    /* Responsive to container width, not viewport */
}

.card-content {
    padding: 2cqw;  /* 2% of container width */
    gap: 1cqh;      /* 1% of container height */
}

/* Named container queries */
@container card (min-width: 400px) {
    .card-title {
        font-size: 3cqw; /* 3% of container named "card" */
    }
}

/* Component entirely responsive to its container */
.product-card {
    container-type: inline-size;
}

.product-title {
    font-size: clamp(0.875rem, 4cqi + 0.5rem, 1.5rem);
}

.product-image {
    width: 100%;
    height: 50cqh; /* 50% of container height */
}

/* Circular positioning */
.item {
    --angle: 45deg;
    --radius: 100px;
    
    /* Calculate x, y positions on circle */
    --x: calc(cos(var(--angle)) * var(--radius));
    --y: calc(sin(var(--angle)) * var(--radius));
    
    transform: translate(var(--x), var(--y));
}

/* Diagonal line length using Pythagorean theorem */
.diagonal {
    --width: 100px;
    --height: 100px;
    --length: hypot(var(--width), var(--height)); /* √(100² + 100²) */
}

/* Wave animation offset */
@keyframes wave {
    to {
        transform: translateY(calc(sin(var(--time)) * 20px));
    }
}

/* Circular progress indicator */
.progress-circle {
    --progress: 0.75; /* 75% */
    --angle: calc(var(--progress) * 360deg);
    background: conic-gradient(
        blue calc(var(--angle)),
        lightgray 0
    );
}

/* Scaling with easing curves */
.smooth-scale {
    --t: 0.5; /* time factor 0-1 */
    scale: calc(1 + sin(var(--t) * 3.14159));
}

/* Exponential scaling */
.exponential {
    --base: 2;
    --level: 3;
    font-size: calc(pow(var(--base), var(--level)) * 1px); /* 2³ = 8px */
}

/* Square root for maintaining aspect ratio */
.aspect-box {
    --area: 10000; /* 100 x 100 */
    width: calc(sqrt(var(--area)) * 1px); /* 100px */
    height: calc(sqrt(var(--area)) * 1px);
}

/* Logarithmic scaling (audio visualizers) */
.audio-bar {
    --frequency: 1000;
    --scale: log(var(--frequency), 10); /* log base 10 */
    height: calc(var(--scale) * 20px);
}

/* Natural exponential growth */
.growth {
    --rate: 0.5;
    scale: exp(var(--rate)); /* e^0.5 ≈ 1.648 */
}

/* Register custom property with type */
@property --gradient-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Now can animate it smoothly */
.gradient-box {
    background: linear-gradient(
        var(--gradient-angle),
        blue,
        purple
    );
    transition: --gradient-angle 1s;
}

.gradient-box:hover {
    --gradient-angle: 360deg; /* Smooth rotation */
}

/* Numeric property for smooth transitions */
@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.progress-bar {
    --progress: 0.75;
    width: calc(var(--progress) * 100%);
    transition: --progress 500ms ease-out;
}

/* Color property for theme switching */
@property --theme-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #007acc;
}

/* Multiple types allowed */
@property --spacing {
    syntax: "<length> | <percentage>";
    inherits: true;
    initial-value: 1rem;
}

/* Universal syntax (any value) */
@property --custom-value {
    syntax: "*";
    inherits: false;
    initial-value: auto;
}

/* Length with specific constraints */
@property --max-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 1200px;
}

/* Usage in animations */
@keyframes colorChange {
    from { --theme-color: blue; }
    to { --theme-color: red; }
}

.animated {
    animation: colorChange 2s infinite;
    background: var(--theme-color);
}

/* Traditional box model (content-box) */
.box {
    width: 200px;         /* Content width */
    height: 100px;        /* Content height */
    padding: 20px;        /* +40px to width, +40px to height */
    border: 5px solid;    /* +10px to width, +10px to height */
    margin: 10px;         /* Spacing outside (doesn't add to size) */
    /* Total width: 200 + 40 + 10 = 250px */
    /* Total height: 100 + 40 + 10 = 150px */
}

/* Shorthand patterns */
.padding-all { padding: 20px; } /* All sides */
.padding-vh { padding: 10px 20px; } /* V: 10px, H: 20px */
.padding-3 { padding: 10px 20px 30px; } /* T: 10px, H: 20px, B: 30px */
.padding-4 { padding: 10px 20px 30px 40px; } /* T R B L (clockwise) */

/* Centering with auto margin */
.centered {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto; /* Horizontal centering */
}

/* Individual sides */
.custom {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Global best practice - apply to all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* content-box example (default) */
.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 5px solid;
    /* Total width: 200 + 20*2 + 5*2 = 250px */
}

/* border-box example (recommended) */
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 5px solid;
    /* Total width: 200px (includes padding and border) */
    /* Content width: 200 - 20*2 - 5*2 = 150px */
}

/* Practical use - predictable layouts */
.container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px; /* Doesn't cause horizontal overflow */
}

/* min-content - smallest possible width */
.min-width {
    width: min-content;
    /* Width = longest word or unbreakable content */
}

/* max-content - no wrapping */
.max-width {
    width: max-content;
    /* Expands to fit all content on one line */
}

/* fit-content - smart adaptive */
.fit-width {
    width: fit-content;
    /* Uses max-content if space available, otherwise wraps */
    max-width: 100%; /* Prevent overflow */
}

/* fit-content with limit */
.limited {
    width: fit-content(500px);
    /* Max 500px, shrinks if less space available */
}

/* Practical: button sizing */
button {
    width: fit-content; /* Wraps text naturally */
    min-width: 120px;   /* Minimum size */
}

/* Stretch - fill available space */
.stretch {
    width: stretch; /* Fills parent (like width: 100%) */
}

/* Card with dynamic width based on content */
.card {
    width: fit-content;
    min-width: 250px;
    max-width: 100%;
}

/* Table column sizing */
th, td {
    width: max-content; /* Fit content without wrapping */
}

/* Navigation items */
.nav-item {
    width: fit-content; /* Shrinks to content */
    padding: 0.5rem 1rem;
}

/* Grid with intrinsic columns */
.grid {
    display: grid;
    grid-template-columns: 
        min-content    /* Icon/image column - smallest possible */
        1fr            /* Main content - fills space */
        max-content;   /* Action buttons - no wrap */
}

/* Video container - 16:9 ratio */
.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Height automatically calculated */
}

/* Square elements */
.avatar {
    width: 100px;
    aspect-ratio: 1 / 1; /* Square */
}

/* Card with consistent ratio */
.card {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3 / 4; /* Portrait card */
}

/* Image placeholder before loading */
.image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
}

/* Responsive grid items maintaining ratio */
.grid-item {
    width: 100%;
    aspect-ratio: 4 / 3;
}

/* With min/max constraints */
.constrained {
    aspect-ratio: 1 / 1;
    width: clamp(100px, 50vw, 500px);
    /* Height follows aspect ratio */
}

/* OLD WAY - padding-top hack */
.old-ratio {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio (9/16 = 0.5625) */
}

.old-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* NEW WAY - aspect-ratio property */
.new-ratio {
    width: 100%;
    aspect-ratio: 16 / 9; /* Much simpler! */
}

/* Combining with object-fit for images */
.responsive-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover; /* Fill without distortion */
}

/* Common pattern: responsive images */
.image-container {
    width: 300px;
    height: 200px;
}

/* cover - fills space, crops if needed */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Focus on center */
}

/* contain - shows all, may have gaps */
.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* scale-down - never enlarges */
.thumbnail {
    max-width: 150px;
    max-height: 150px;
    object-fit: scale-down;
}

/* none - original size */
.icon {
    width: 48px;
    height: 48px;
    object-fit: none;
}

/* Focus on top of image (faces, important content) */
.portrait {
    object-fit: cover;
    object-position: center top;
}

/* Focus on bottom */
.landscape {
    object-fit: cover;
    object-position: center bottom;
}

/* Precise positioning with percentages */
.off-center {
    object-fit: cover;
    object-position: 75% 25%; /* Right-upper focus */
}

/* Video element */
video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Profile pictures - always square, centered */
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

/* Auto - most common (scrollbar when needed) */
.scrollable-container {
    max-height: 400px;
    overflow: auto;
}

/* Hidden - clip overflow */
.image-container {
    overflow: hidden; /* Clips overflow content */
    border-radius: 8px; /* Creates rounded images */
}

/* Separate x and y control */
.horizontal-scroll {
    overflow-x: auto;   /* Horizontal scroll when needed */
    overflow-y: hidden; /* No vertical scroll */
    white-space: nowrap; /* Prevent wrapping */
}

/* Vertical scroll only */
.chat-box {
    height: 500px;
    overflow-y: auto;   /* Vertical scroll */
    overflow-x: hidden; /* No horizontal scroll */
}

/* Clip - hard clip (no scroll programmatically) */
.strict-clip {
    overflow: clip; /* Cannot be scrolled even with JS */
}

/* Single line ellipsis */
.truncate {
    white-space: nowrap;      /* Prevent wrapping */
    overflow: hidden;         /* Hide overflow */
    text-overflow: ellipsis;  /* Show ... */
}

/* Multi-line ellipsis (webkit only) */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Word breaking for long content */
.break-words {
    overflow-wrap: break-word; /* Break long words */
    word-break: break-word;    /* Alternative */
}

/* Card title truncation */
.card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Scrollable sidebar */
.sidebar {
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Horizontal scrolling gallery */
.gallery {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* Snap scrolling */
}

/* Table with fixed header */
.table-container {
    max-height: 500px;
    overflow-y: auto;
}

/* Modal content */
.modal-content {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Code block with horizontal scroll */
pre {
    overflow-x: auto;
    white-space: pre;
}

/* Create flex container */
.container {
    display: flex;
    flex-direction: row;    /* Horizontal layout (default) */
    flex-wrap: wrap;        /* Allow wrapping */
    gap: 1rem;              /* Modern spacing */
}

/* Alternative: inline-flex */
.inline-container {
    display: inline-flex;   /* Inline-level flex container */
}

/* Shorthand */
.shorthand {
    display: flex;
    flex-flow: row wrap;    /* direction + wrap */
}

/* Equal-width items */
.item {
    flex: 1;  /* All items share space equally */
}

/* Proportional sizing */
.sidebar {
    flex: 1;  /* Takes 1 part */
}
.main {
    flex: 3;  /* Takes 3 parts (3x wider) */
}

/* Fixed size item */
.fixed {
    flex: none;  /* Doesn't grow or shrink */
    width: 200px;
}

/* Content-based sizing */
.auto-size {
    flex: auto;  /* Flexible based on content */
}

/* Reorder items visually */
.header { order: -1; }  /* First */
.main { order: 1; }     /* Second */
.footer { order: 2; }   /* Third */

/* Individual alignment */
.special {
    align-self: center;  /* Override container's align-items */
}

/* Horizontal layout (default) */
.horizontal {
    display: flex;
    flex-direction: row;  /* Left to right */
}

/* Vertical layout */
.vertical {
    display: flex;
    flex-direction: column;  /* Top to bottom */
}

/* Reversed horizontal */
.reversed {
    display: flex;
    flex-direction: row-reverse;  /* Right to left */
}

/* Wrapping items */
.wrap-container {
    display: flex;
    flex-wrap: wrap;  /* Allow items to wrap to next line */
    gap: 1rem;
}

/* No wrapping (default) */
.no-wrap {
    display: flex;
    flex-wrap: nowrap;  /* Force single line, items shrink */
}

/* Combined shorthand */
.combined {
    display: flex;
    flex-flow: column wrap;  /* Vertical + wrapping */
}

/* Center horizontally and vertically (Holy Grail) */
.center-both {
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
}

/* Space items evenly */
.space-evenly {
    display: flex;
    justify-content: space-between;  /* Max space between */
}

/* Align to end */
.align-end {
    display: flex;
    justify-content: flex-end;  /* Right align (row) */
    align-items: flex-end;      /* Bottom align */
}

/* Multi-line alignment */
.multi-line {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;  /* Space between lines */
}

/* Individual item alignment */
.container {
    display: flex;
    align-items: flex-start;  /* Default for all items */
}
.special-item {
    align-self: flex-end;  /* Override for this item */
}

/* flex-basis sets initial size on main axis */
.item {
    flex-basis: 200px;  /* 200px on main axis (width if row, height if column) */
}

/* auto - uses content or width/height */
.auto-basis {
    flex-basis: auto;   /* Uses width/height if set, else content size */
    width: 150px;       /* This is used as basis */
}

/* 0 vs auto difference */
.zero-basis {
    flex: 1 1 0%;  /* Ignores content size, pure ratio */
}
.auto-basis {
    flex: 1 1 auto;  /* Respects content size, then distributes */
}

/* Container: 1000px, 3 items with 100px basis each */
.container {
    display: flex;
    width: 1000px;
}

/* Free space = 1000 - (100 + 100 + 100) = 700px */

.item1 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
.item2 {
    flex: 2 0 100px;  /* Gets 2/4 of 700px = 350px → Total: 450px */
}
.item3 {
    flex: 1 0 100px;  /* Gets 1/4 of 700px = 175px → Total: 275px */
}
/* Sum of grows = 1 + 2 + 1 = 4 */

/* Equal width items */
.equal {
    flex: 1;  /* All get same width (flex: 1 1 0%) */
}

/* Container: 500px, 3 items want 300px each */
.container {
    display: flex;
    width: 500px;
}

/* Overflow = (300 + 300 + 300) - 500 = 400px */

.item1 {
    flex: 0 1 300px;  /* Shrink factor: 1, loses proportional space */
}
.item2 {
    flex: 0 2 300px;  /* Shrink factor: 2, loses 2x more */
}
.item3 {
    flex: 0 1 300px;  /* Shrink factor: 1 */
}
/* Sum = 1 + 2 + 1 = 4 */
/* item1 loses: 400 × (1/4) = 100px → 200px */
/* item2 loses: 400 × (2/4) = 200px → 100px */
/* item3 loses: 400 × (1/4) = 100px → 200px */

/* Prevent shrinking */
.no-shrink {
    flex-shrink: 0;  /* Maintains size */
}

/* Horizontal navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-item {
    flex: none;  /* Fixed size items */
}

/* Push last item to right */
.nav-end {
    margin-left: auto;  /* Pushes to right */
}

/* Full pattern */
<nav class="nav">
    <div class="logo">Logo</div>
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
    <div class="nav-item nav-end">Login</div>
</nav>

/* Equal height cards */
.card-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 300px;  /* Min 300px, flexible */
    display: flex;
    flex-direction: column;
}

.card-content {
    flex: 1;  /* Takes remaining space */
}

.card-footer {
    margin-top: auto;  /* Push to bottom */
}

/* Full page flex layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: none;  /* Fixed height */
}

.main {
    flex: 1;  /* Fill remaining space */
    display: flex;
}

.sidebar {
    flex: 0 0 250px;  /* Fixed 250px width */
}

.content {
    flex: 1;  /* Fill remaining width */
}

.aside {
    flex: 0 0 200px;  /* Fixed 200px width */
}

/* Image + text side-by-side */
.media {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.media-image {
    flex: none;  /* Fixed width image */
    width: 100px;
}

.media-content {
    flex: 1;  /* Text fills remaining space */
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
    .media {
        flex-direction: column;
    }
}

/* Sticky footer pattern */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;  /* Grows to fill space */
}

.footer {
    flex: none;  /* Always at bottom */
}

/* Flexbox responsive grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex-grid > * {
    flex: 1 1 calc(33.333% - 1rem);  /* 3 columns */
    min-width: 250px;  /* Stack when too narrow */
}

/* 2 columns */
.two-col {
    flex: 1 1 calc(50% - 1rem);
    min-width: 300px;
}

/* 4 columns */
.four-col {
    flex: 1 1 calc(25% - 1rem);
    min-width: 200px;
}

/* Center single item */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Center multiple items vertically */
.vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
}

/* Center with margin auto */
.container {
    display: flex;
}
.centered-item {
    margin: auto;  /* Centers in both directions */
}

/* Simple grid - 3 equal columns */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Or shorter: */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Fixed and flexible columns */
.layout {
    display: grid;
    grid-template-columns: 250px 1fr 200px; /* Sidebar, main, aside */
    grid-template-rows: auto 1fr auto; /* Header, content, footer */
    gap: 20px;
    min-height: 100vh;
}

/* Responsive grid with auto-fit */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    /* Items wrap automatically when space is insufficient */
}