---
import IllustrationCard from "../illustration-card.astro";
import LightDarkImg from "../light-dark-img.astro";
import Terminal from "../terminal.astro";
import Window from "../window.astro";
import { OverviewIllustrationTerminalContent } from "./overview-illustration-terminal-content";
---

<style>
  .card {
    height: 542px;
    width: 723px;
    position: relative;
  }

  .terminal {
    position: absolute;
    top: 60px;
    left: 50px;
    width: 420px;
    height: 320px;
  }
  .ide {
    position: absolute;
    top: 226px;
    left: 183px;
    width: 420px;
  }

  @media only screen and (max-width: 600px) {
    .card {
      display: none;
    }
  }
</style>
<IllustrationCard blend class="card">
  <Terminal class="terminal"><OverviewIllustrationTerminalContent /></Terminal>
  <Window class="ide">
    <LightDarkImg src="illustrations/overview-ide" />
  </Window>
</IllustrationCard>
