@import url('main.css');

:root {
  --background--primary: #303030;
  --text--primary: #d1d1d1;
  --text--accent: #bfbfbf;
  --shadow: #141414;
  --light: #666666;
}

.navigation__pointer {
  filter: invert(100%) saturate(0);
}

.logo__wrapper {
  filter: saturate(0);
}

.image-and-caption {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  max-height: 100%;
}

.image__wrapper {
  flex-basis: 60%;
  flex-shrink: 2;
  border-width: var(--shadow-width);
  border-style: solid;
  border-color: var(--skeuomorphic-border);
  height: 100%;
}

.image {
  position: relative;
  /* move above paper texture */
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  flex-basis: 40%;
  font-size: var(--font-size--caption);
  line-height: 1.2;
  overflow: auto;
  flex-shrink: 0;
  max-height: 100%;
}

.caption p {
  padding-top: var(--spacing-2);
}

@media only screen and (max-width: 700px) {
  .image-and-caption {
    flex-direction: column;
    overflow: auto;
  }

  .caption {
    overflow: visible;
  }
}