@media (min-width: 360px) {
  .container {
    max-width: 360px;
  }
}

@media (min-width: 400px) {
  .container {
    max-width: 400px;
  }
}

@media (min-width: 500px) {
  .container {
    max-width: 500px;
  }
}

@media (min-width: 600px) {
  .container {
    max-width: 600px;
    padding-top: 6rem;
  }

  header label {
    display: none;
  }

  nav {
    display: block;
    position: static;
    width: auto;
  }

  .header-name-list {
    max-width: 600px;
    margin: auto;
  }

  .featured-post {
    background-color: #0b515f;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .featured-post h3 {
    padding: 0px 0px 20px 10px;
  }

  .prev-btn,
  .next-btn {
    padding: 5px 10px;
  }

  .post-index {
    flex: 0 0 calc(75% - 20px);
  }

  .contact-us {
    width: 600px;
  }

  .contact-form_child {
    display: grid;
    grid-gap: 2rem;
  }

  .name-grid {
    grid-area: 1 / 1;
  }
  .email-grid {
    grid-area: 1 / 2;
  }
  .subject-grid {
    grid-area: 2 / 1;
  }
  .message-grid {
    grid-area: 3 / 1;
  }

  .message-textarea {
    width: 200%;
    resize: none;
  }

  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 50px;
  }
}

@media (min-width: 800px) {
  .container {
    max-width: 800px;
  }

  .header-name-list {
    max-width: 800px;
  }

  .carousel-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .carousel-slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }

  .post-index {
    flex: 0 0 calc(50% - 20px);
  }

  .post-index img {
    width: 100%;
  }

  .other-posts {
    display: flex;
    align-items: center;
    grid-gap: 1rem;
  }

  .other-post-image {
    flex: 50%;
  }

  .other-post-text {
    flex: 50%;
  }
}

@media (min-width: 1144px) {
  .container {
    max-width: 1144px;
  }

  .header-name-list {
    max-width: 1144px;
  }

  .post-index {
    flex: 0 0 25%;
  }

  .post-index img {
    width: 100%;
  }

  .posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 50px;
  }

  .about-container {
    display: flex;
    flex-direction: row;
  }

  .about-text {
    flex: 1;
  }

  .about-image {
    flex: 1;
  }
}