.main {
  display: flex;
  flex-direction: column;
}

@media screen {
  /* * HERO */
  .hero__heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: var(--space-12);
  }

  .hero__thumbnail {
    display: block;
    width: 100%;
    object-fit: cover;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 2;
    margin-bottom: -28.125cqw;
  }

  .page-tags {
    padding-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* * Overview */
  .overview__line {
    width: 50px;
    border: 1px solid var(--color-primary-black);
    margin-bottom: var(--space-8);
  }

  .overview__container {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: var(--space-20);
  }

  .overview__details {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content;
    row-gap: var(--space-8);
  }

  .overview__subtitle {
    font-size: var(--text-xl);
    padding-bottom: var(--space-2);
  }

  .overview__list-item {
    font-size: var(--text-sm);
  }

  .overview__list {
    list-style: none;
  }

  .overview__video {
    width: 100%;
  }

  .overview__thumbnail {
    width: 100%;
  }

  /* * Highlight*/
  .highlight {
    color: var(--color-primary-white);
    background-color: var(--color-primary-black);
    background-image: url("/assets/images/grid.png");
  }

  .highlight__image {
    width: 100%;
  }

  /* * Features */
  .features {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .feature__thumbnail {
    width: 100%;
  }

  .feature__thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  /* * More Projects */
  .more-projects > .heading {
    margin-bottom: var(--space-12);
  }

  .projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .project {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: fit-content;
    color: var(--color-primary-white);
    text-decoration: none;
  }

  .project__title {
    font-size: var(--text-2xl);
  }

  .project__thumbnail {
    width: 100%;
  }

  .project__title {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
  }

  .project__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

@media screen and (min-width: 768px) {
  /* * Overview */
  .overview__container {
    grid-template-columns: 2fr 1fr;
    column-gap: var(--space-16);
    padding-bottom: var(--space-28);
  }

  .overview__list-item {
    font-size: var(--text-base);
  }

  .overview__details {
    text-wrap: nowrap;
    column-gap: var(--space-8);
  }

  /* * Features */
  .features {
    gap: var(--space-20);
  }

  /* * More Projects */
  .projects {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 1000px) {
  /* * Overview */
  .overview__body {
    padding-inline: var(--space-16);
  }
}

@media screen and (min-width: 1200px) {
  /* * Features */
  .features {
    gap: var(--space-32);
  }

  .overview__subtitle {
    font-size: var(--text-2xl);
  }
}