/* APP-GRID styles */
.app-grid {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}
.app-grid__item {
  width: 25%;
  padding: 8px;
}

/* APP-MAIN styles */
.app-main {
  align-self: stretch;
  display: flex;
  flex-direction: row-reverse;
}
.app-main__aside {
  /*width: 364px;*/
  width: 332px;
  flex-shrink: 0;
  padding-right: 20px;
}
.app-main__content {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.app-main__nav {
  max-width: 300px;
}

/* APP-ARTICLE styles */
.app-article {
  width: 100%;
  border-radius: 32px;
  padding: 32px;
  background-color: var(--BeigeMedium-Bg);
}
.app-article__body.is-collapsed {
  max-height: 220px;
  overflow: hidden;
  position: relative;
}
.app-article__body.is-collapsed:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(234, 228, 224, 0) 0%, var(--BeigeMedium-Bg) 100%);
}
.app-article__header {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-direction: row-reverse;
}
.app-article__header:not(:last-child) {
  margin-bottom: 40px;
}
.app-article__header-block {
  margin-left: auto;
}
.app-article__media {
  border-radius: 18px;
  overflow: hidden;
  width: 160px;
  height: 80px;
}
.app-article__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.app-article__content {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.app-article__content img {
  border-radius: 18px;
}
.app-article__footer {
  margin-top: 20px;
}
.app-article__bottom {
  text-align: center;
  margin-top: 28px;
  margin-bottom: -6px;
}

/* @media MAX */
@media (max-width: 1280px) {
  .app-grid__item {
    width: 33.333%;
  }
  .app-main__aside {
    width: 320px;
  }
}
@media (max-width: 1100px) {
  .app-grid__item {
    width: 50%;
  }
  .app-main__aside {
    width: 280px;
  }
}
@media (max-width: 991px) {
  .app-main {
    display: block;
    width: 100%;
  }
  .app-main__aside {
    width: 100%;
    padding-right: 0;
    position: sticky;
    z-index: 99;
    top: auto;
    bottom: 20px;
    -webkit-filter: drop-shadow(0 0 20px var(--Grey-Text));
    filter: drop-shadow(0 0 20px var(--Grey-Text));
    margin-top: 20px;
  }
  .app-main__nav {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .app-grid__item {
    width: 100%;
  }
  .app-article__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-article__header:not(:last-child) {
    margin-bottom: 22px;
  }
  .app-article__header-block {
    margin-left: 0;
  }
  .app-article__body.is-collapsed {
    max-height: 250px;
  }
}