:root {
  --clr-primary-300: hsl(35, 77%, 62%);
  --clr-primary-400: hsl(5, 85%, 63%);
  --clr-primary-500: hsl(5, 85%, 50%);

  --clr-neutral-100: hsl(36, 100%, 99%);
  --clr-neutral-200: hsl(233, 8%, 79%);
  --clr-neutral-300: hsl(236, 13%, 42%);
  --clr-neutral-400: hsl(240, 100%, 5%);

  --ff-primary: 'Inter', sans-serif;

  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extra-bold: 800;

  --fs-300: 0.8125rem;
  --fs-400: 0.9374rem;
  --fs-500: 0.9375rem;
}

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

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

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
button {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

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

input,
button {
  font: inherit;
}

/* typography */

body {
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  font-family: var(--ff-primary);
  color: var(--clr-neutral-300);
}

/* basic */

.container {
  --max-width: 1400px;
  --padding: .5rem;

  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;

  @media (width <=699px) {
    --max-width: 500px;
  }
}

/* header */

.header {
  position: relative;
  padding-block: 1rem;
}

/* navigation */

.nav-list {
  text-align: center;
}

.nav-item {
  margin-bottom: .5rem;
}

.nav-link {
  text-decoration: none;
  display: inline-block;
  padding: .3rem;
  color: var(--clr-neutral-400);
  font-weight: var(--fw-bold);

  &:hover {
    color: var(--clr-primary-400);
  }
}

/* mobile navigation */

.mobile-nav-toggle {
  position: absolute;
  top: 28px;
  right: 0;
  background-color: white;
  border: 0;
  cursor: pointer;

  @media (width >=700px) {
    display: none;
  }
}

.main-nav {
  @media (width <=699px) {
    display: none;
  }
}

.nav-visible {
  display: block;
}

/* main grid */

.main-grid {
  display: grid;
  gap: 1rem;
}

/* hero */

.hero-content p {
  margin-bottom: .5rem;
}

.main-title {
  font-weight: var(--fw-extra-bold);
  color: var(--clr-neutral-400);
  font-size: 2rem;

  & span {
    display: block;
    color: var(--clr-primary-500);
  }
}

/* button */

.button {
  cursor: pointer;
  text-decoration: none;
  border: 0;
  padding: .71em 1.5em;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-400);

  &:hover,
  &:focus-visible {
    background-color: var(--clr-neutral-400);
  }
}

/* sidebar */

.new {
  padding-block: 2rem;
  position: relative;

  &:not(:last-of-type)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--clr-neutral-300);
  }
}

.sidebar {
  padding: 1rem;
  background-color: var(--clr-neutral-400);
  color: var(--clr-neutral-200);
}

.sidebar-title {
  font-weight: var(--fw-bold);
  color: var(--clr-primary-300);
  font-size: 2rem;
}

.new-title {
  color: var(--clr-neutral-100);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

/* products */

.products {
  display: grid;
  gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(min(359px, 100%), 1fr));

  padding-block: 1rem;
}

.product {
  display: grid;
  grid-template-columns:
    fit-content(131px) fit-content(303px);
  gap: 1rem;
}

.product-content {
  display: grid;
}

.product-number {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--clr-neutral-200);
}

.product-title {
  font-weight: var(--fw-bold);
  color: var(--clr-neutral-400);
  font-size: 1.2rem;
}

/* footer */

footer {
  background-color: var(--clr-neutral-400);
  color: var(--clr-neutral-100);
  padding: 3rem;
}

.attribution {
  display: grid;
  gap: 1rem;
  place-items: center;

  .coder {
    color: var(--clr-primary-400);
  }
}

/* media query */

@media (width >=700px) {
  .header {
    display: flex;
    justify-content: space-between;
    padding-block: 2rem;
  }

  .main-nav {
    flex: 1;
  }

  .nav-list {
    display: flex;
    justify-content: end;
    gap: 2rem;
  }
}

@media (width >=700px) {
  .main-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .hero-img {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .sidebar {
    grid-column: 3 / -1;
    grid-row: 1 / 4;
  }

  .main-title {
    grid-column: 1 / 3;
  }

  .hero-content {
    grid-column: 1 / 3;
  }

  .products {
    grid-column: 1 / -1;
    /* grid-template-columns: subgrid; */
  }
}

@media (width >=900px) {
  .main-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
  }

  .hero-img {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .sidebar {
    grid-column: 3 / -1;
    grid-row: 1 / 3;
  }

  .main-title {
    grid-column: 1 / 2;
  }

  .hero-content {
    grid-column: 2 / 3;
  }

  .products {
    grid-column: 1 / -1;
    /* grid-template-columns: subgrid; */
  }
}