/* Utopia size and space scales */
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--1: clamp(0.83rem, calc(0.83rem + 0.02vw), 0.84rem);
  --step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --step-1: clamp(1.2rem, calc(1.1rem + 0.52vw), 1.5rem);
  --step-2: clamp(1.44rem, calc(1.25rem + 0.97vw), 2rem);
  --step-3: clamp(1.73rem, calc(1.4rem + 1.63vw), 2.66rem);
  --step-4: clamp(2.07rem, calc(1.56rem + 2.57vw), 3.55rem);
  --step-5: clamp(2.49rem, calc(1.71rem + 3.91vw), 4.74rem);
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
  --space-2xs: clamp(0.5rem, calc(0.48rem + 0.11vw), 0.56rem);
  --space-xs: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
  --space-xs: clamp(0.75rem, calc(0.71rem + 0.22vw), 0.88rem);
  --space-s: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --space-m: clamp(1.5rem, calc(1.43rem + 0.33vw), 1.69rem);
  --space-l: clamp(2rem, calc(1.91rem + 0.43vw), 2.25rem);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: sans-serif;
  font-size: var(--step-0);
  padding: var(--space-m);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Flow utility */
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* Repel composition */
.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-m));
}

/* Item block */
.item {
  max-width: 40rem;
  margin: 0 auto;
}

.item h1 {
  font-size: var(--step-0);
  line-height: 1.1;
}

.item p {
  font-size: var(--step--1);
}

.item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid #efefef;
}

.item__meta > * {
  --flow-space: var(--space-3xs);
}