
@media (max-width: 1500px) {
  .post-layout .review-sidebar {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    width: 100%;
    margin: 2rem 0 0 0;
    box-sizing: border-box;
  }

  .post-layout .review,
  .review-sidebar .review {
    max-width: 100%;
    height: 30px; 
    align-items: center;
  }

}

@media (max-width: 750px) {
    .review-block {
        text-align: center;
    }
  .post-block .album-cover {
    float: none;
    display: block;
    width: min(20rem, 80vw);
    margin: 0 auto 1rem auto;
    padding: 0 0 0 0;
  }

  .post-block h1 {
    font-size: 20px;
  }
  .post-block h2 {
    font-size: 16px;
  }

  .review-block h1,
  .review-block h2,
  .review-block h3{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .review-block p {
    padding: 15px 1rem 15px 1rem;
    font-size: 14px;
  }

  .review-block ul,
  .review-block p {
    text-align: left;
  }
}
@media (max-width: 1500px) {
  .sidebarlayout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
  }

  .post-block {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .review-block {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 90%;
  }

  .sidebar {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    top: auto;
    width: 90%;
  }

  .nav-bar {
    width: 80%;
  }
}

@media (max-width: 1100px) {
  .sidebarlayout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
  }

  .homelayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .homelayout > .post-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
    padding: 0px 0px 0px 0px;
    gap: 0rem;
  }

  .homelayout .post::before {
    clip-path: polygon(0% 10%, 5% 0%, 100% 0%, 100% 90%, 95% 100%, 0% 100%);
    inset: 0px 0px 0px 0px;
  }
  
  .homelayout > .sidebarlayout {
    grid-column: 1;
    grid-row: 2;
    margin: 0 auto;
  }

  .homelayout .review-sidebar {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    width: 100%;
    margin-top: 2rem;
    margin-left: 0;
  }

  .post-block {
    grid-column: 1;
    grid-row: 1;
    padding: 5vw;
  }

  .review-block {
    grid-column: 1;
    grid-row: 1;
  }

  .sidebar {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-items: center;
    margin: 2rem auto 0 auto;
  }

  .sidebar > h1 {
    grid-column: 1 / -1;
    width: 100%;
  }

  .sidebar > .post {
    width: 100%;
    justify-self: center;
    padding-left: 5vw;
  }

  .sidebarlayout .review-sidebar,
  .post-layout .review-sidebar,
  .homelayout .review-sidebar {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    top: auto;
    width: 100%;
    margin: 2rem 0 2rem 0;
    box-sizing: border-box;
  }

  .hinge {
    visibility: hidden;
  }
}

@media (max-width: 650px) {
  /* .homelayout .post-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  } */
  .nav-button {
    width: 80px;
    font-size: 14px;
  }
}
@media (max-width: 950px) {
  .ransom-strip span {
    font-size: 80px;
  }

  .ransom-strip img {
    width: 120px;
    margin-left: -45px;
    transform: translateY(-10px);
    z-index: -1;
  }

  .nav-bar {
    width: 100%;
  }

}

@media (max-width: 600px) {
  .ransom-strip span {
    font-size: 11vw;
  }
  
  .ransom-strip img {
    width: 20vw;
    /* transform: translateX(-8vw); */
    z-index: -4;
    margin-left: -8vw;
  }

  .ransom-strip span[style*="margin-right"] {
    margin-right: 4vw !important;
  }
  .ransom-strip span[style*="font-size"] {
    font-size: 4vw !important;
  }

  .review-block {
    width: 99%;
    outline-width: 2px;
    border-width: 2px;
  }

  .sidebarlayout {
    width: 100%;
  }

}