/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic (CALLED IN NORMALIZE.CSS)
	- Normalize
	- Box sizing
	- Media width
# Base
	- Typography
	- Elements
	- Links
# Components
	- Header
	- Main
	- Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

/* Elements
--------------------------------------------- */

/* Links
--------------------------------------------- */

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */

/* Hero
--------------------------------------------- */

/* Main
--------------------------------------------- */
main section {
  display: flex;
  flex-direction: column-reverse;
}

main section p {
  line-height: 2rem;
}

main section p:not(:last-child) {
  margin-bottom: 1rem;
}

.food-introduction {
  gap: 1rem;
}

.staple-foods-img img,
.taiwan-tea-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.taiwan-tea-img img:nth-child(2),
.taiwan-tea-img img:nth-child(3) {
  object-position: center 85%;
}

@media (min-width: 48em) {
  main {
    margin: 0 3rem;
    padding-top: 3rem;
  }

  .staple-foods-img {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: auto;
  }

  .taiwan-tea-img {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 9.375rem);
  }
}

@media (min-width: 60em) {
  .food-introduction {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 2rem;
  }
}

@media (min-width: 90em) {
  main section {
    flex-direction: unset;
  }

  main section:first-child {
    margin-bottom: 7rem;
  }

  main section:not(:last-child):not(:first-child) {
    margin-bottom: 15rem;
  }

  main section h2 {
    position: relative;
    font-size: 8rem;
    line-height: normal;
  }

  /* Food Introduction */
  .food-introduction {
    max-width: 62.5rem;
    grid-template-columns: repeat(2, 28.125rem);
  }

  /* Staple Foods */
  .staple-food-content {
    gap: 1rem;
  }

  .staple-food-wrapper {
    min-width: 0;
  }

  .staple-foods-img {
    grid-template-columns: repeat(4, 7.5rem);
  }

  .staple-food-title {
    background-color: #fff;
    left: -10.625rem;
    white-space: nowrap;
    width: fit-content;
  }

  /* Night Markets */
  .night-market-content {
    flex-direction: column;
  }

  .night-market-img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
  }

  .night-market-title {
    margin-bottom: 0.5rem;
    height: 6.25rem;
    line-height: 4rem;
    background-color: #fff;
  }

  .night-market-inner {
    max-width: 70rem;
    column-count: 2;
    column-gap: 1rem;
  }

  /* Taiwan Tea */
  .taiwan-tea-content {
    gap: 2rem;
  }

  .taiwan-tea-img {
    flex: 0 0 30%;
    grid-template-rows: auto;
  }

  .taiwan-tea-inner {
    column-count: 2;
    column-gap: 1rem;
  }
}

@media (min-width: 120em) {
  /* Staple Foods */
  .staple-foods-img {
    grid-template-columns: repeat(4, 11.25rem);
  }

  /* Taiwan Tea */
  .taiwan-tea-content {
    flex-direction: row;
  }

  .taiwan-tea-img {
    grid-template-rows: repeat(4, 9.375rem);
    flex: 0 0 30%;
  }

  .taiwan-tea-inner {
    column-count: 3;
  }
}

/* Footer
--------------------------------------------- */