/* for food/must-know/credit pages logo styling */
.logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  display: flex;

  padding: 0.5rem;
  background-color: var(--highlightColor);
  border-radius: 20px;
}

#main {
  min-height: 100vh;
  padding: 1rem;
}

main h1 {
  font-family: "Taviraj", sans-serif;
  font-size: clamp(2rem, 3vw, 5rem);
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.grid-wrapper {
  display: grid;
  justify-content: center;
}

.grid-item {
  color: var(--highlightColor);
  border: 4px solid var(--highlightColor);
  border-radius: 20px;
  margin: 1rem 0;
}

.grid-item img {
  width: 100%;
  border-radius: 15px 15px 0 0;
}
.grid-item h2 {
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.grid-item h2,
.grid-item p {
  padding: 0.5rem 1rem;
}

.grid-item {
  text-align: center;
}

@media (min-width: 48em) {
  .grid-wrapper {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 15.625rem);
    gap: 0.5rem;
    margin: 2rem 0;
  }

  .grid-item {
    text-align: left;
    margin: 0;
    overflow: hidden;
  }

  figure img {
    object-fit: cover;
    height: 100%;
  }

  /* coffee */
  .one img,
  .five img {
    width: 30%;
  }
  .one {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    object-fit: cover;
    grid-column: 6/ 9;
  }

  /* rooster */
  .five {
    display: flex;
    align-items: center;
    grid-column: 1/ 4;
    grid-row: 1 / 2;
  }

  /* gps */
  .nine {
    overflow: hidden;
    grid-column: 4 /5;
    grid-row: 1;
  }

  .nine h2,
  .nine p,
  .two h2,
  .two p {
    font-weight: 500;
    font-size: clamp(0.6rem, 0.9vw, 2rem);
  }

  .two,
  .nine {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* street */
  .two {
    grid-column: 5/6;
    grid-row: 1;
  }

  /* bike family */
  .seven img {
    height: 70%;
  }

  .seven {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;

    grid-column: 1/ 4;
    grid-row: 2/ 5;
  }

  /* pajama guy */
  .four img {
    height: 50%;
  }
  .four {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: 4/7;
    grid-row: 2/4;
  }

  /* rice */
  .three img {
    height: 50%;
  }
  .three {
    display: flex;
    flex-direction: column-reverse;
    gap: 3rem;
    grid-column: 7/ 9;
    grid-row: 2/4;
  }

  /* horns */
  .six h2,
  .six p {
    font-size: clamp(1rem, 1.5vw, 3rem);
  }
  .six {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 4/6;
  }

  /* chair */
  .eight h2,
  .eight p {
    font-size: clamp(1rem, 1.5vw, 3rem);
  }
  .eight img {
    height: 30%;
  }
  .eight {
    display: flex;
    align-items: center;
    grid-column: 6/9;
  }
}

@media (min-width: 64em) {
  .grid-item img {
    height: 100%;
  }

  .four {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .four figcaption {
    font-size: 1.5rem;
    align-self: center;
  }

  .four img {
    height: 80%;
  }

  .eight img {
    width: 40%;
  }
}