@media (768px <= width < 1024px) {
  #articles .left .title.flex {
    flex-direction: row;
  }
  #articles .left .title .label {
    display: block;
    background-color: #000;
    color: #fff;
    box-shadow: 3px 3px #000;
    rotate: 2deg;
    padding: 0.5rem 1rem;
    white-space: nowrap;
  }
}
@media (1024px <= width < 1280px) {
  #articles .container > .flex {
    flex-direction: row;
    gap: 2rem;
  }
  #articles .left {
    width: 70%;
  }
  #articles .left .title.flex {
    flex-direction: row;
  }
  #articles .left .title .label {
    display: block;
    background-color: #000;
    color: #fff;
    box-shadow: 3px 3px #000;
    rotate: 2deg;
    padding: 0.5rem 1rem;
    white-space: nowrap;
  }
  #articles .left .articles .article.flex {
    flex-direction: row;
  }
  #articles .left .articles .article.flex .image-container {
    width: auto;
    margin-inline-end: 1.5rem;
  }
  #articles .left .articles .article.flex .content {
    width: 100%;
  }
  #articles .left .articles .article .content .info > div {
    width: 49%;
  }
  #articles .left .load-more {
    margin-block-end: 0;
  }
  #articles .right {
    width: 30%;
    height: fit-content;
    position: sticky;
    top: 64px;
    right: 0;
  }
}
@media (1280px <= width) {
  #articles .container > .flex {
    flex-direction: row;
    gap: 2rem;
  }
  #articles .left {
    width: 70%;
  }
  #articles .left .title.flex {
    flex-direction: row;
  }
  #articles .left .title .label {
    display: block;
    background-color: #000;
    color: #fff;
    box-shadow: 3px 3px #000;
    rotate: 2deg;
    padding: 0.5rem 1rem;
    white-space: nowrap;
  }
  #articles .left .articles .article.flex {
    flex-direction: row;
  }
  #articles .left .articles .article.flex .image-container {
    width: auto;
    margin-inline-end: 1.5rem;
  }
  #articles .left .articles .article.flex .content {
    width: 100%;
  }
  #articles .left .articles .article .content .info > div {
    width: 22%;
  }
  #articles .left .articles .article .content .info > div:first-child {
    width: 31%;
  }
  #articles .left .load-more {
    margin-block-end: 0;
  }
  #articles .right {
    width: 30%;
    height: fit-content;
    position: sticky;
    top: 64px;
    right: 0;
  }
}
