@charset "utf-8";

:root {
  color-scheme: light dark;
  --outer-background: #f7d8ba;
  --outer-background-dark: #201713;
  --focus: #a61f2f;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--outer-background);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--outer-background);
}

.page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background: #fbe0c7;
}

.media-block,
.image-link {
  display: block;
  line-height: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.image-link {
  position: relative;
  outline: 0;
}

.image-link:focus-visible {
  z-index: 1;
  outline: 4px solid var(--focus);
  outline-offset: -4px;
}

@media (hover: hover) {
  .image-link img {
    transition: filter 160ms ease;
  }

  .image-link:hover img {
    filter: saturate(1.04) brightness(0.99);
  }
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background: var(--outer-background-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-link img {
    transition: none;
  }
}