/* Imports */
@import url("./common.css");
@import url("./reusables.css");

/*== View Transition ==*/
@view-transition {
    navigation: auto;
}

/*== Shared == */
.home, .articles, .error, .gallery, .article, .about, .contact {
  padding: 0.75rem;
}

.home .featured_cards,
.gallery .gallery_images,
.articles .top_frogs {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
  justify-content: center;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(4, 1fr);
}

/*== Error Page */
.error {
  display: flex;
  flex-direction: column;
}

/*== Home Page ==*/
.home .search_form {
  display: flex;
  gap: 0.5rem;
}

.home .frogstistics {
  display: grid;
  gap: 1.5rem;
  grid-template-rows: 1fr;
  grid-template-columns: 0.30fr 1fr;
}

/*== Article Page ==*/
.article .article_content {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.5fr 1fr;
  grid-template-rows: 1fr;
}

.article .article_content .card {
  box-shadow: none;
}

/*== About Page ==*/
.about .side_by_side {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/*== Media Queries ==*/
@media (max-width: 550px) {
  .home .featured_cards,
  .gallery .gallery_images,
  .articles .top_frogs {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }

  .article .article_content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2 1fr);
  }

  .home .frogstistics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .home .frogstistics {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2 1fr);
  }

  .home .featured_cards,
  .gallery .gallery_images,
  .articles .top_frogs {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4 1fr);
  }
}