#articles {
  padding: 5rem 0;
  border: 2px solid #000;
  position: relative;
}
#articles .flex {
  flex-direction: column;
}
#articles .left {
  width: 100%;
}
#articles .left .title {
  margin-block-end: 3rem;
}
#articles .left .title h3 {
  width: 100%;
  text-align: left;
}
#articles .left .title .label {
  display: none;
}
#articles .left .articles {
  margin-block-end: 3rem;
}
#articles .left .articles .article {
  padding: 2rem;
  margin-block: 2rem;
  border: 4px solid #000;
  box-shadow: 4px 4px #000;
  transition: transform 0.2s linear, box-shadow 0.2s linear;
}
#articles .left .articles .article:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px #000;
}
#articles .left .articles .article .image-container {
  width: 100%;
  margin-block-end: 0.75rem;
}
#articles .left .articles .article .image {
  width: 10rem;
  height: 8rem;
  border: 2px solid #000;
  position: relative;
}
#articles .left .articles .article .image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
#articles .left .articles .article .image .label {
  position: absolute;
  top: -7px;
  right: -7px;
  color: #fff;
  rotate: 12deg;
  padding: 0.25rem 0.5rem;
  border: 2px solid #000;
}
#articles .left .articles .article .image .label.new {
  background-color: oklch(0.637 0.237 25.331);
  rotate: 12deg;
}
#articles .left .articles .article .image .label.hot {
  background-color: oklch(0.623 0.214 259.815);
  rotate: -12deg;
}
#articles .left .articles .article .image .label.viral {
  background-color: oklch(0.627 0.265 303.9);
  rotate: 45deg;
}
#articles .left .articles .article .content {
  width: 100%;
}
#articles .left .articles .article .content .label {
  display: inline-block;
  color: #000;
  font-size: 10.5px;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border: 2px solid #000;
  margin-block-end: 0.75rem;
  box-shadow: 3px 3px #000;
}
#articles .left .articles .article .content .label.tech {
  background-color: oklch(0.905 0.182 98.111);
  rotate: -1deg;
}
#articles .left .articles .article .content .label.design {
  background-color: oklch(0.871 0.15 154.449);
  rotate: 1deg;
}
#articles .left .articles .article .content .label.culture {
  background-color: oklch(0.823 0.12 346.018);
  rotate: -2deg;
}
#articles .left .articles .article .content h4 {
  margin-block-end: 0.75rem;
  transition: color 0.2s linear;
}
#articles .left .articles .article.red:hover .content h4 {
  color: oklch(0.577 0.245 27.325);
}
#articles .left .articles .article.blue:hover .content h4 {
  color: oklch(0.546 0.245 262.881);
}
#articles .left .articles .article.purple:hover .content h4 {
  color: oklch(0.588 0.2888 302.321);
}
#articles .left .articles .article .content p {
  margin-block-end: 1rem;
}
#articles .left .articles .article .content .info > div {
    display: inline-block;
  width: 100%;
}
#articles .left .articles .article .content .info .likes {
  color: oklch(0.577 0.245 27.325);
}
#articles .left .load-more {
  width: 100%;
  text-align: center;
  margin-block-end: 2rem;
}
#articles .left .load-more button {
  padding: 1rem 3rem;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 6px 6px #000;
  border: 0;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#articles .left .load-more button:hover {
  transform: translate(6px, 6px);
  box-shadow: none;
}
#articles .right {
  width: 100%;
}
#articles .right .trending {
  padding: 2rem;
  margin-block-end: 2rem;
  border: 4px solid #000;
  box-shadow: 6px 6px #000;
}
#articles .right .trending h4 {
  margin-block-end: 1.5rem;
}
#articles .right .trending .article {
  cursor: pointer;
  margin-block-end: 1.5rem;
}
#articles .right .trending .article .number {
  margin-inline-end: 1rem;
}
#articles .right .trending .article.red .number {
  color: oklch(0.637 0.237 25.331);
}
#articles .right .trending .article.blue .number {
  color: oklch(0.623 0.214 259.815);
}
#articles .right .trending .article.purple .number {
  color: oklch(0.627 0.265 303.9);
}
#articles .right .trending .article.flex {
  flex-direction: row;
  align-items: flex-start;
}
#articles .right .trending .article .content h5 {
  margin-block-end: 0.25rem;
  transition: color 0.1s ease-in-out;
}
#articles .right .trending .article.red:hover h5 {
  color: oklch(0.637 0.237 25.331);
}
#articles .right .trending .article.blue:hover h5 {
  color: oklch(0.623 0.214 259.815);
}
#articles .right .trending .article.purple:hover h5 {
  color: oklch(0.627 0.265 303.9);
}
#articles .right .categories {
  padding: 2rem;
  border: 4px solid #000;
  box-shadow: 6px 6px #000;
}
#articles .right .categories h4 {
  margin-block-end: 1.5rem;
}
#articles .right .categories .category {
  border: 2px solid #000;
  padding: 0.75rem 1rem;
  margin-block-end: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s linear, box-shadow 0.15s linear,
    transform 0.15s linear;
}
#articles .right .categories .category:hover {
  box-shadow: 6px 6px #000;
  transform: translate(-2px, -2px);
}
#articles .right .categories .category.yellow {
  background-color: oklch(0.973 0.071 103.193);
}
#articles .right .categories .category.yellow:hover {
  background-color: oklch(0.905 0.182 98.111);
}
#articles .right .categories .category.green {
  background-color: oklch(0.962 0.044 156.743);
}
#articles .right .categories .category.green:hover {
  background-color: oklch(0.871 0.15 154.449);
}
#articles .right .categories .category.pink {
  background-color: oklch(0.948 0.028 342.258);
}
#articles .right .categories .category.pink:hover {
  background-color: oklch(0.823 0.12 346.018);
}
#articles .right .categories .category.blue {
  background-color: oklch(0.932 0.032 255.585);
}
#articles .right .categories .category.blue:hover {
  background-color: oklch(0.809 0.105 251.813);
}
#articles .right .categories .category.purple {
  background-color: oklch(0.946 0.033 307.174);
}
#articles .right .categories .category.purple:hover {
  background-color: oklch(0.827 0.119 306.383);
}