:root {
  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low:
    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.09),
    0.4px 0.8px 1px -1.3px hsl(var(--shadow-color) / 0.09),
    0.9px 1.8px 2.2px -2.7px hsl(var(--shadow-color) / 0.08);
  --shadow-elevation-medium:
    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.1),
    0.7px 1.5px 1.8px -0.9px hsl(var(--shadow-color) / 0.09),
    1.9px 3.7px 4.6px -1.8px hsl(var(--shadow-color) / 0.09),
    4.6px 9.2px 11.3px -2.7px hsl(var(--shadow-color) / 0.09);
  --shadow-elevation-high:
    0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.08),
    1.1px 2.1px 2.6px -0.3px hsl(var(--shadow-color) / 0.08),
    1.9px 3.8px 4.7px -0.7px hsl(var(--shadow-color) / 0.08),
    3px 6px 7.3px -1px hsl(var(--shadow-color) / 0.08),
    4.6px 9.2px 11.3px -1.3px hsl(var(--shadow-color) / 0.07),
    6.9px 13.8px 16.9px -1.7px hsl(var(--shadow-color) / 0.07),
    10.2px 20.4px 25px -2px hsl(var(--shadow-color) / 0.07),
    14.8px 29.5px 36.1px -2.4px hsl(var(--shadow-color) / 0.07),
    20.8px 41.5px 50.8px -2.7px hsl(var(--shadow-color) / 0.07);
}

* {
  box-sizing: border-box;
}
body {
  background: #f0f0f0;
  background-color: rgb(254 242 242);
  background-image: linear-gradient(
    345deg,
    hsl(240deg 92% 76%) 0%,
    hsl(257deg 83% 74%) 5%,
    hsl(273deg 74% 73%) 10%,
    hsl(288deg 64% 71%) 14%,
    hsl(304deg 61% 70%) 19%,
    hsl(317deg 77% 74%) 24%,
    hsl(326deg 92% 76%) 29%,
    hsl(333deg 100% 78%) 33%,
    hsl(339deg 100% 79%) 38%,
    hsl(346deg 100% 80%) 43%,
    hsl(353deg 100% 82%) 48%,
    hsl(1deg 100% 83%) 52%,
    hsl(9deg 100% 82%) 57%,
    hsl(15deg 100% 82%) 62%,
    hsl(21deg 100% 82%) 67%,
    hsl(25deg 100% 83%) 71%,
    hsl(30deg 100% 83%) 76%,
    hsl(34deg 100% 84%) 81%,
    hsl(37deg 100% 85%) 86%,
    hsl(41deg 100% 87%) 90%,
    hsl(47deg 96% 88%) 95%,
    hsl(55deg 88% 90%) 100%
  );
  margin: 0;
}

img[width] {
  width: auto; /* Defer to max-width */
}

img[width][height] {
  height: auto; /* Preserve aspect ratio */
}

/* Let SVG scale without boundaries */
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  grid-gap: 2rem;
}
a,video {
  align-self: center;
}
img,video {
  display: block;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  box-shadow: var(--shadow-elevation-high);
  width: 100%;
  border-radius: 30px;
}
.single {
  place-self: center;
  width: auto;
  height: 100vh;
  border-radius: 0;
}

.wrapper {
  max-width: var(--wrapper-max-width, 110rem);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  padding-bottom: 2rem;
  position: relative;
}