/* Aside */
aside {
  padding-right: 0.8rem;
  max-width: 200px;
  min-width: 200px;
}
.aside-title {
  font-size: larger;
  font-weight: bolder;
}
aside section {
  margin-bottom: 15px;
}

/* category */
#category-container {
  display: flex;
  flex-direction: column;

  position: relative;

  width: 100%;
  padding: 5px;
  border-radius: 4px;

  background-color: var(--color-1);
}
#category-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}

#category-container h2 {
  text-align: center;
  margin-bottom: 10px;
}

#category-buttons-container {
  display: flex;
  flex-direction: column;
}
.category-button {
  display: flex;
  align-items: center;

  cursor: pointer;

  width: 100%;
  padding: 10px 5px;

  border-bottom: 1px solid gray;
}
.category-button:last-of-type {
  border-bottom: 0;
}

.category-button:hover {
  color: var(--color-3);
  background-color: #d6d6d6;
  transition: background-color 0.15s ease-in;
}

.category-button span {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;

  -webkit-font-smoothing: antialiased;
}
.category-button img {
  height: auto;
  width: 30px;
  object-fit: contain;

  margin-right: 4px;
}
.category-button:hover img {
  filter: invert(33%) sepia(90%) saturate(1032%) hue-rotate(173deg)
    brightness(102%) contrast(90%) !important;
}

.category-content {
  z-index: 3;
  display: none;
  position: absolute;

  top: 0;
  left: 100%;
  height: 100%;
  width: 100%;

  padding: 10px;

  border-radius: 4px;
  background-color: var(--color-1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
}

.category-content a:hover {
  font-weight: 600;
}
.category-content-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.category-content-section h5 {
  font-size: 15px;
  margin-bottom: 5px;
  padding-bottom: 1px;

  border-bottom: 1px solid gray;
}

/* Special Offer */
.aside-special-offer {
  display: flex;
  flex-direction: column;

  width: 100%;

  padding: 5px;

  background: linear-gradient(to bottom, #2980b9, #fff, #fff);
  background-color: var(--color-1);
}
.aside-special-offer-text > h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 300;
}
.aside-special-offer-text > h3 {
  color: #292929;
  margin-top: 5px;
}
.aside-special-offer-img,
.aside-special-offer-img > img {
  width: 100%;
}

/* Aside Articles */
.aside-articles {
  display: flex;
  flex-direction: column;

  width: 100%;

  padding: 5px;
  background-color: var(--color-1);
}
.aside-articles > h3 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  border-bottom: 4px solid var(--color-2);
}
.aside-article {
  margin: 8px 0 0 !important;
}
.aside-article,
.aside-article > a,
.aside-article .article-img {
  width: 100% !important;
}
.aside-article .article-img {
  height: 100px;
}

.aside-sticky {
  position: sticky;
  top: 78px;
}