:root {
  font-family: Inter, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
  scrollbar-gutter: stable;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

:root {
  --color-page-bg: #000000;
  --color-canvas-bg: #3d3d3d;
  --color-text-white: #FFFFFF;
  --color-text-black: #000000;
  --color-text-muted: #BABABA;
  --color-image-bg: #666666;

  --canvas-width: 800px;
  --canvas-height: 1080px;
  --container-padding: 75px;
  --cell-padding: 10px;

  --grid-cols-template: 325px 325px;
  --grid-rows-template: 325px;
  --grid-gap: 0px;

  --font-main: Inter, sans-serif;
  --weight-medium: 500;
  --weight-regular: 400;

  --size-heading: 24px;
  --size-subheading: 18px;
  --size-description: 18px;
  --size-link: 14px;

  --margin-heading-bottom: 15px;
  --margin-subheading-bottom: 5px;
  --margin-cell-bottom: 15px;
}

.page--theme-light {
  --color-page-bg: #000000;
  --color-canvas-bg: #ffffff;
  --color-text-white: #242424;
  --color-text-muted: #666666;
  --color-image-bg: #666666;
}

.page--theme-dark {
  --color-page-bg: #000000;
  --color-canvas-bg: #242424;
  --color-text-white: #FFFFFF;
  --color-text-muted: #8C8C8C;
}

.page--theme-black {
  --color-page-bg: #000000;
  --color-canvas-bg: #000000;
  --color-text-white: #FFFFFF;
  --color-text-muted: #969696;
}

.portfolio__link--back--theme-dark {
  margin-bottom: 15px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page {
  background-color: var(--color-page-bg);
  font-family: var(--font-main);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.portfolio {
  width: var(--canvas-width);
  min-height: 100vh;
  background-color: var(--color-canvas-bg);
  overflow: hidden;
}

.portfolio__container {
  padding: var(--container-padding);
  width: 100%;
  height: 100%;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: var(--grid-cols-template);
  grid-template-rows: var(--grid-rows-template);
  grid-auto-rows: 325px;
  gap: var(--grid-gap);
  width: 100%;
  height: 100%;
}

.portfolio__grid--main {
  grid-auto-rows: auto;
}

.portfolio__cell {
  padding: var(--cell-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.portfolio__content {
  margin-bottom: var(--margin-cell-bottom);
}

.portfolio__cell--position-tl {
  grid-column: 1;
  grid-row: 1;
}

.portfolio__cell--position-tr {
  grid-column: 2;
  grid-row: 1;
}

.portfolio__cell--position-bl {
  grid-column: 1;
  grid-row: 2;
}

.portfolio__cell--position-br {
  grid-column: 2;
  grid-row: 2;
}

.portfolio__heading {
  font-size: var(--size-heading);
  font-weight: var(--weight-medium);
  color: var(--color-text-white);
  margin-bottom: var(--margin-heading-bottom);
}

.portfolio__subheading {
  font-size: var(--size-subheading);
  font-weight: var(--weight-medium);
  color: var(--color-text-white);
  margin-bottom: var(--margin-subheading-bottom);
}

.portfolio__description {
  font-size: var(--size-description);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.portfolio__link-text {
  text-decoration: none;
  color: inherit;
  display: block;
  width: fit-content;
}

.portfolio__link-text:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.portfolio__link-text-gray:hover {
  color: var(--color-text-muted);
}

.portfolio__link-text-white:hover {
  color: var(--color-text-white);
}

.portfolio__link-text-black:hover {
  color: var(--color-text-black);
}

.portfolio__link {
  font-size: var(--size-link);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.portfolio__link--back {
  margin-bottom: 15px;
}

.portfolio__link:hover {
  color: var(--color-text-white);
}

.portfolio__contact-item {
  display: contents; 
}

.portfolio__image {
  width: 305px;
  height: 305px;
}

@media (max-width: 840px) {
  :root {
    --canvas-width: 100%;
    --container-padding: 35px;
    --grid-cols-template: 1fr;
    --grid-rows-template: auto;
  }

  .portfolio {
    min-height: 100vh;
    height: auto;
  }

  .portfolio__grid {
    grid-auto-rows: auto;
    gap: 50px;
  }

  .portfolio__cell--position-tl,
  .portfolio__cell--position-tr,
  .portfolio__cell--position-bl,
  .portfolio__cell--position-br {
    grid-column: auto;
    grid-row: auto;
  }

  .portfolio__cell {
    padding: 0;
  }

  .portfolio__image {
    width: 100%;
    max-width: 305px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .portfolio__image img {
    width: 100%;
    object-fit: cover;
  }
  
  .portfolio__link--back {
    margin-bottom: 50px;
  }

  .portfolio__link--back--theme-dark {
    margin-bottom: 0px;
  }
}