body {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 320px;
      min-height: 100vh;
      overflow-x: hidden;

      font-size: clamp(0.80rem, calc(0.700rem + 0.625vw), 1.10rem);


      outline: 10px solid red !important;
    }


    .box--short {
      display: flex;
      gap: 1.5em;
    }

    .box--image {
      width: 20%;
      max-width: 242px;
      overflow: hidden;
    }

    .box--image img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 0.4rem;
    }

    .box--data {
      flex: 1;
    }

    .box--shout {
      font-family: 'Medium';
      font-size: 200%;
      padding-bottom: 0.25em;
      color: hsl(0, 50%, 40%);
    }

    .box--intro {
      font-size: 150%;
    }

    .box--more,
    .box--less,
    .box--more-inactive::after {
      position: absolute;
      bottom: 2em;
      right: 2vw;
      font-family: 'bold';
      font-size: 75%;
      text-transform: uppercase;
      color: hsl(210, 60%, 40%);
    }

    .box--more:hover,
    .box--less:hover {
      cursor: pointer;
      color: hsl(33, 100%, 40%);
    }

    .box--more::after,
    .box--more-inactive::after {
      content: "Show more ...";
    }

    .box--less::after {
      content: "... Show less";
    }

    .box--less {
      display: none;
    }

    .box--more-inactive::after {
      color: hsl(210, 20%, 70%);
    }

    .box--full {
      display: none;
      padding-top: 2em;
    }




    #page-title-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-color: hsl(180, 10%, 92%);
    }

    #page-title {
      width: 100%;
      max-width: var(--stdW);
      font-family: 'Bold';
      font-size: 250%;
      color: hsl(180, 40%, 30%);
      padding: 1em 2vw 0.25em;
    }

    #fastlinks {
      width: 100%;
      max-width: var(--stdW);
      display: flex;
      align-self: center;
      /* align-self: flex-start; */
      /* gap: 1rem; */
      line-height: 1;
      /* margin: 0 auto; */
      padding: 0 2vw;
    }

    .fastlink {
      display: flex;
      align-self: center;
      font-family: 'Bold';
      font-size: 70%;
      text-transform: uppercase;
      letter-spacing: 0.15px;
      line-height: 1.25;
    }

    .pipe-divider {
      font-family: 'Light';
      font-size: 115%;
      line-height: 1.25;
      /* margin-top: -0.25em; */
      color: hsl(210, 60%, 40%);
    }

    section.page-section {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-image: linear-gradient(to bottom, hsl(180, 10%, 92%), hsl(180, 10%, 99%) 3em, white);
    }

    .section-content {
      position: relative;
      width: 100%;
      max-width: var(--stdW);
      padding: 2em 1rem 3em;
    }

    .page-section article {
      position: relative;
      width: 100%;
      max-width: var(--stdW);
      font-size: clamp(0.80rem, calc(0.700rem + 0.625vw), 1.10rem);
      padding: 2em 2vw 3em;
    }

    .art-header {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 1.5em;
      transition: all 1s;

    }

    .art-header .img-div {
      width: 20%;
      max-width: 242px;
      overflow: hidden;

      transition: all 1s;

      border-radius: 0.4rem;
      box-shadow: 0 0.25rem 0.5rem hsla(180, 20%, 50%, 0.1);
    }

    .art-header .img-div img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: 0.4rem;
    }

    .art-header.active {
      gap: 0;
    }

    .art-header.active .img-div {
      width: 0;
    }

    section.page-section {
      scroll-margin-top: 80px;
    }

    .box--title {
      font-family: 'Bold';
      font-size: 80%;
      text-transform: uppercase;
      line-height: 1;
      letter-spacing: 0.5px;
      padding: 0.5em 0 1em;
      color: hsl(180, 10%, 50%);
    }