<section>
  <div class="projects container">
    <h2 class="section-title">Projects</h2>
    <article class="project">
      <div class="project__img-container">
        <img class="project__img" src='https://images.unsplash.com/photo-1544474560-5b2a788d024a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3NjU2OTU&ixlib=rb-4.0.3&q=80&w=800' alt=''>
      </div>
      <div class="project__content grid-flow">
        <h3 class="project__title">E Commerce Website</h3>
        <ul class="project__tags flex-group" role="list">
          <li class="project__tag">NextJS</li>
          <li class="project__tag">TypeScript</li>
        </ul>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reprehenderit ipsa officia dolore recusandae cumque tenetur, cupiditate est? Suscipit voluptatibus nihil, nam quisquam illo architecto laudantium perspiciatis ipsa nesciunt dolor!</p>
        <a class="project__cta" href="exmaple.com" target="_blank" rel="noopener noreferrer">View project</a>
      </div>
    </article>
    <article class="project">
      <div class="project__img-container">
        <img class="project__img" src='https://images.unsplash.com/photo-1620287920810-3f5b9746380c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3Njc2NTY&ixlib=rb-4.0.3&q=85&w=800' alt=''>
      </div>
      <div class="project__content grid-flow">
        <h3 class="project__title">Todo App</h3>
        <ul class="project__tags flex-group" role="list">
          <li class="project__tag">React</li>
          <li class="project__tag">Sass</li>
          <li class="project__tag">PosgreSQL</li>
        </ul>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reprehenderit ipsa officia dolore recusandae cumque tenetur, cupiditate est? Suscipit voluptatibus nihil, nam quisquam illo architecto laudantium perspiciatis ipsa nesciunt dolor!</p>
        <a class="project__cta" href="exmaple.com" target="_blank" rel="noopener noreferrer">View project</a>
      </div>
    </article>
    <article class="project">
      <div class="project__img-container">
        <img class="project__img" src='https://images.unsplash.com/photo-1600783245998-945baf9626bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3NjcyNDY&ixlib=rb-4.0.3&q=80&w=800' alt=''>
      </div>
      <div class="project__content grid-flow">
        <h3 class="project__title">Twitter UI Clone</h3>
        <ul class="project__tags flex-group" role="list">
          <li class="project__tag">NextJS</li>
          <li class="project__tag">API</li>
          <li class="project__tag">TailWind CSS</li>
        </ul>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reprehenderit ipsa officia dolore recusandae cumque tenetur, cupiditate est? Suscipit voluptatibus nihil, nam quisquam illo architecto laudantium perspiciatis ipsa nesciunt dolor!</p>
        <a class="project__cta" href="exmaple.com" target="_blank" rel="noopener noreferrer">View project</a>
      </div>
    </article>
    <article class="project">
      <div class="project__img-container">
        <img class="project__img" src='https://images.unsplash.com/photo-1650182040372-66cd50e43887?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODI3NjgwOTQ&ixlib=rb-4.0.3&q=80&w=800' alt=''>
      </div>
      <div class="project__content grid-flow">
        <h3 class="project__title">Product Landing Page Website</h3>
        <ul class="project__tags flex-group" role="list">
          <li class="project__tag">React</li>
          <li class="project__tag">Redux</li>
        </ul>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reprehenderit ipsa officia dolore recusandae cumque tenetur, cupiditate est? Suscipit voluptatibus nihil, nam quisquam illo architecto laudantium perspiciatis ipsa nesciunt dolor!</p>
        <a class="project__cta" href="exmaple.com" target="_blank" rel="noopener noreferrer">View project</a>
      </div>
    </article>
  </div>
</section>

/*------------------------------------*\
  #ROOT
\*------------------------------------*/
:root {
  --clr-primary-100: hsl(210, 100%, 60%);
  --clr-primary-200: hsl(210, 100%, 50%);
  --clr-primary-300: hsl(210, 100%, 35%);
  --clr-primary-400: hsl(210, 100%, 25%);
  --clr-primary-500: hsl(210, 100%, 16%);
  
  --clr-neutral-100: hsl(213, 22%, 100%);
  --clr-neutral-200: hsl(213, 22%, 92%);
  --clr-neutral-300: hsl(213, 22%, 80%);
  --clr-neutral-400: hsl(212, 21%, 56%);
  --clr-neutral-500: hsl(212, 21%, 36%);
  --clr-neutral-600: hsl(212, 21%, 28%);
  --clr-neutral-700: hsl(213, 22%, 20%);
  --clr-neutral-800: hsl(212, 21%, 14%);
  --clr-neutral-900: hsl(213, 22%, 8%);
  
  --ff-primary: 'Source Sans Pro', sans-serif;
  --ff-secondary: 'Noto Serif', serif;
  
  --fw-regular: 400;
  --fw-bold: 700;
  
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;
  --fs-700: 2rem;
  --fs-800: 3rem;
  --fs-900: 5rem;
  
  --fs-300: clamp(0.75rem, calc(0.82rem + -0.09vw), 0.80rem);
  --fs-400: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);
  --fs-500: clamp(1.25rem, calc(1.22rem + 0.14vw), 1.33rem);
  --fs-600: clamp(1.56rem, calc(1.49rem + 0.37vw), 1.78rem);
  --fs-700: clamp(1.95rem, calc(1.81rem + 0.72vw), 2.37rem);
  --fs-800: clamp(2.44rem, calc(2.19rem + 1.25vw), 3.16rem);
  --fs-900: clamp(3.05rem, calc(2.65rem + 2.01vw), 4.21rem);
  
  --transition: 300ms ease;
}

/*------------------------------------*\
  #RESET
  https://andy-bell.co.uk/a-modern-css-reset/
\*------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  font: inherit;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  
  background-color: var(--clr-neutral-800);
  color: var(--clr-neutral-200);
  
  font-family: var(--ff-primary);
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

h1, h2, h3 {
  line-height: 1.1;
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
}

svg {
  height: 2ex;
  width: auto;
  flex: none;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

section {
  padding-block: 2rem;
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
.container {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

.grid-flow {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.flex-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.box {
  width: 100px;
  aspect-ratio: 1 / 1;
  border: 1px solid #f2f2f2;
  border-radius: 0.2em;
}

.section-title {
  font-size: var(--fs-800);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/*------------------------------------*\
  #PROJECTS
\*------------------------------------*/
.projects {
  counter-reset: project;
}

.project {
  --_border-radius: 0.35rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "image" 
    "content";
  gap: 2rem;
  padding-block: 2rem 3.5rem;
  counter-increment: project;
  position: relative;
}

.project:where(:not(:last-child))::after {
  --_divider-offset: 30%;
  content: "";
  position: absolute;
  inset: auto var(--_divider-offset) 0 var(--_divider-offset);
  border: 1px solid var(--clr-neutral-600);
}

@media (width > 50em) {
  .project {
    grid-template-columns: 1fr 1fr;
  }
  
  .project:nth-child(odd) {
    grid-template-areas: 
      "image content";
  }
  
  .project:nth-child(even) {
    grid-template-areas: 
      "content image";
  }
}

.project__img-container {
  grid-area: image;
  border-radius: var(--_border-radius);
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 10;
}

@media (width < 50em) {
  .project__img-container {
    overflow: hidden;
  }
}

.project__img-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.5rem solid var(--clr-primary-300);
  border-radius: var(--_border-radius);
  transform: translate(-1rem, 1rem);
  z-index: -1;
}

.project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--_border-radius);
  filter: grayscale(80%);
  transition: filter var(--transition);
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
}

.project:is(:hover, :focus-within) .project__img {
  filter: grayscale(0%);
}

.project__content {
  grid-area: content;
}

.project__title {
  font-size: var(--fs-700);
}

.project__title::before {
  content: "Project " counters(project, ".", decimal-leading-zero) " ";
  display: block;
  text-transform: uppercase;
  font-size: var(--fs-600);
  font-family: var(--ff-primary);
  color: var(--clr-neutral-400);
  margin-bottom: 0.25em;
}

.project__tag {
  padding: 0.25em 0.5em;
  background-color: var(--clr-neutral-600);
  color: var(--clr-neutral-300);
  border-radius: 0.25em;
  
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

.project__cta {
  position: relative;
  width: fit-content;
  display: inline-flex;
  gap: 0.35em;
  
  color: var(--clr-primary-200);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-bold);
  text-transform: capitalize;
  text-decoration: none;
}

.project__cta::after {
  content: "➜";
  color: inherit;
  opacity: 0;
  transition: var(--transition);
  transition-property: opacity, transform;
}

.project__cta:is(:hover, :focus)::after {
  transform: translateX(5px);
  opacity: 1;
}