main.news-feed.article-page {
  article.article {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto 2rem;
    max-width: var(--container-l);
    width: 100%;

    header.article__page-header {
      border-bottom: 1px solid var(--light-gray);
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 1rem;
      max-width: 100%;
      padding-bottom: 1rem;
      position: relative;
      transition: 0.4s ease-in-out;
      width: 100%;

      .article__thumbnail-wrapper {
        border-radius: var(--border-radius);
        max-width: unset;

        &:not(:has(.article__thumbnail)) .article__thumbnail__expand-btn {
          display: none;
        }
      }

      .article__thumbnail__expand-btn {
        #expand-image-btn, #minimize-image-btn {
          pointer-events: none;
        }

        &.article__thumbnail__expand-btn--active + .article__thumbnail-wrapper.article__thumbnail--expanded {
          height: 100%;
          margin: auto 0;
          max-height: 80vh;
          max-width: 100%;
          min-height: fit-content;

          img {
            border-radius: 0;
            display: block;
            height: 100%;
            margin: auto;
            max-height: inherit;
            width: auto;
          }
        }
      }

      &:has(.article__thumbnail-wrapper.article__thumbnail--expanded) { /* Article Image is expanded */
        height: unset;

        .article__thumbnail-wrapper {
          flex-grow: 1;
          min-width: 100%;
          position: relative;
          transition: ease-in-out 0.5s, max-height 0.5s, max-width 0.5s, box-shadow 0s;

          .card__badges {
            display: none;
          }
        }
      }

      .article__published-details section.attributes article.attributes__item .attributes__body {
        gap: 0.25rem;

        counter > p {
          font-size: unset;
        }
      }

      @media screen and (max-width: 600px) {
        .article__published-details section.attributes article.attributes__item .attributes__body .counter-text {
          display: none;
        }
      }
    }

    .article__content {
      max-width: var(--container-l);
      width: 100%;
    }
  }

  @media screen and (max-width: 768px) {
    padding: 1rem;

    .link-back {
      padding: 1rem 1rem 1rem 0;
      margin: 0;
    }

    header.article__page-header {
      gap: 0.5rem;
    }
  }
}

main.news-feed.admin {
  .article-form .field-section#article-image-field {
    .field {
      flex-direction: column;
    }

    .article__thumbnail-wrapper--preview {
      border-radius: var(--border-radius);
      max-width: var(--container-s);
    }
  }

  .page-container {
    margin: 0 auto;
    max-width: var(--container-xl);
  }

  .article-page {
    padding: 0;
    position: relative;

    .centered-content {
      text-align: center;
    }

    .article-activity-container {
      margin: 0 auto;
      max-width: var(--container-l);
      width: 100%;
    }

    .article {
      .article__content {
        .image-container {
          text-align: center;

          &.with-background {
            background-color: #cdd1e0;
            margin: 0 50px;
            padding: 20px;
            border-radius: 3px;

            img {
              max-width: 60%;
            }
          }

          img {
            max-width: 85%;

            &.stretched {
              max-width: 100%;
            }
          }
        }

        .article-attachments.attachment-card-highlight {
          box-shadow: inset -2px 2px 4px rgba(208, 208, 208, 0.25);
          padding: 0.5rem 1rem;
          flex-wrap: wrap;

          h4 {
            margin: 0 0 1rem;
            width: 100%;
          }

          .wrap-row {
            margin: 0;

            a.btn {
              margin: 0;
            }
          }
        }
      }

      &:has(.article-attachments.attachment-card-highlight) .article__content {
        margin-bottom: 0;
      }
    }
  }

  /* Article Previews (Mobile & Web) */

  .article__preview-tabs.tabs-container {
    &.tabs-primary > nav.tab-navigation {
      margin-top: 0;
    }
  }

  .article__preview.article__preview--mobile {
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    margin: 0 auto 2rem;
    max-width: var(--container-sm);
    padding: 0.5rem;
    width: 100%;

    header.article__header--mobile {
      width: 100%;

      .article__info {
        border-bottom: 1px solid var(--light-gray);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
      }
    }
  }
}

#shared-surveys-notice {
  border: 1px solid var(--theme-color-lighter);
  border-radius: var(--border-radius);
}