.service {

  .container-wide {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 50px;
    align-items: start;

    @media (max-width:1440px) {
      grid-template-columns: 420px 1fr;
      gap: 40px;
    }

    @media (max-width:1280px) {
      grid-template-columns: 360px 1fr;
      gap: 32px;
    }

    @media (max-width:1024px) {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }

  /* SIDEBAR */

  aside {
    border-right: 1px solid var(--color-neutral-300);

    @media (max-width:1024px) {
      border-right: none;
      border-bottom: 1px solid var(--color-neutral-300);
      order: 2;
      padding-top: 10px;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        position: relative;
        padding: 12px 0;

        a {
          display: block;
          position: relative;
          padding-right: 40px;
          color: var(--color-neutral-500);
          text-align: right;
          text-transform: uppercase;
          font-feature-settings: 'case' on;
          font-size: var(--font-size-xs);
          line-height: var(--line-height-snug);
          text-decoration: none;
          transition: color .3s ease;

          @media (max-width:1024px) {
            text-align: left;
            padding-right: 0;
            padding-left: 34px;
          }

          &:after {
            position: absolute;
            content: '';
            width: 20px;
            height: 20px;
            right: 0;
            top: 50%;
            transform: translate(calc(50% - 4px), -50%);
            background-color: var(--color-neutral-800);
            background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.0858 3.38911L3.4038 0.707105L4.1109 0L8 3.88911L4.1109 7.77816L3.4038 7.07106L6.0858 4.38911H0V3.38911H6.0858Z' fill='white'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 8px 8px;
            border-radius: 50%;
            opacity: 0;
            transition: opacity .3s ease, transform .3s ease;

            @media (max-width:1024px) {
              left: 0;
              right: auto;
              transform: translate(0,-50%);
            }
          }
        }

        &.active {

          a {
            color: var(--color-neutral-800);
            font-weight: 800;

            &:after {
              opacity: 1;
              transform: translate(50%,-50%);

              @media (max-width:1024px) {
                transform: translate(0,-50%);
              }
            }
          }

        }

        &:hover {

          a {
            color: var(--color-neutral-800);

            &:after {
              opacity: 1;
              transform: translate(50%,-50%);

              @media (max-width:1024px) {
                transform: translate(0,-50%);
              }
            }
          }

        }

      }
    }
  }

  /* CONTENT */

  .service-body {
    min-width: 0;

    @media (max-width:1024px) {
      order: 1;
    }

    .text {
      font-size: var(--font-size-md);
      line-height: var(--line-height-relaxed);
      color: var(--color-neutral-800);

      p {
        margin: 0 0 24px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      h2,h3,h4,h5,h6 {
        margin: 0 0 20px;
        line-height: var(--line-height-snug);
      }

      ul,ol {
        margin: 0 0 24px;
        padding-left: 22px;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
    }

    .page-gallery-wrap {
      margin-top: 50px;

      @media (max-width:1024px) {
        margin-top: 40px;
      }

      @media (max-width:576px) {
        margin-top: 32px;
      }
    }

  }

}