/****************************************************************************/
/* VIEWPORT MEDIUM SIZES */
/****************************************************************************/

/***************************************/
/* PAGE SPECIFIC */
/***************************************/

/* HOMEPAGE */

@media only screen and (max-width: 1200px) {
  .homepage-hero-section {
    flex-direction: column;
    align-items: center;
  }

  .homepage-main-heading {
    font-size: 1.2rem;
    margin: 3rem auto;
  }

  .carousel-container {
    max-width: calc((350px * 2) + 1rem); /* Adjust the number of cards shown */
  }

  .welcome-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 70%;
  }

  .author-img {
    max-width: 100%;
  }

  .welcome-txt-container {
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem;
  }

  .rm-btn-cont {
    margin-bottom: 1.5rem;
  }

  /* POSTS PAGE */

  .bloglist-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CONTACT PAGE */

  .contact-form-section {
    margin: 0 2rem;
    margin-bottom: var(--mb-main);
  }

  .contact-img {
    display: none;
  }
}

/****************************************************************************/
/* VIEWPORT SMALL SIZES */
/****************************************************************************/

/***************************************/
/* GLOBAL STYLING */
/***************************************/

@media only screen and (max-width: 768px) {
  /* MAIN NAVIGATION */

  header {
    position: relative;
    justify-content: space-between;
  }

  nav {
    display: block;
    top: 103px;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: max-height 0.3s ease-out;
    background-color: var(--clr-sec-background);
  }

  .nav-list-centering {
    display: none;
  }

  .menu-icon {
    display: block;
    cursor: pointer;
  }

  #menu-checkbox:checked ~ nav {
    max-height: 500px;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .nav-list li {
    text-align: center;
    width: 100%;
    border-bottom: 1px solid var(--clr-main-txt);
  }

  .nav-list li a {
    display: block;
    width: 100%;
    padding: 2rem;
  }

  /* Styling of .nav-list li a:active takes effect on touch devices */
  .nav-list li a:hover,
  .nav-list li a:active {
    color: white;
    background-color: var(--clr-main-txt);
  }

  .current-page {
    background-color: #d4ba9f;
  }

  /* FOOTER */

  .newsletter-section {
    padding: 2rem 0.5rem;
    text-align: center;
  }

  .newsletter-form {
    flex-wrap: wrap;
    justify-content: center;
  }

  .newsletter-input {
    padding: 0.5rem;
  }

  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }

  /***************************************/
  /* PAGE SPECIFIC */
  /***************************************/

  /* HOMEPAGE */

  .carousel-container {
    max-width: 350px; /* Adjust the number of cards shown */
  }

  .prev-arrow {
    left: 0;
  }

  .next-arrow {
    right: 0;
  }

  .welcome-section {
    width: 100%;
  }

  /* Quote Section */

  .quote-txt {
    font-size: var(--f-size-h4);
  }

  /* POSTS PAGE */

  .bloglist-container {
    grid-template-columns: 1fr;
  }

  /* ABOUT PAGE */

  .about-content-container {
    margin: 0 auto;
  }

  .about-main-txt-container {
    flex-direction: column;
  }

  .about-outro-txt-container {
    flex-direction: column-reverse;
    margin-bottom: 5rem;
  }

  .about-img-container {
    width: 100%;
  }

  .about-txt-container {
    width: 100%;
  }

  /* CONTACT PAGE */

  .contact-txt {
    margin-top: 1rem;
  }

  /* POST SPECIFIC PAGE */

  .specific-meta-bar .txt {
    font-size: var(--f-size-body-medium);
  }
}