.single__post-tags {
  padding: 0 0 56px 0;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  .tags-text {
    font-size: 16px;
    line-height: normal;
    font-weight: bold;
    color: #111;
  }
}
.single__post-tag {
  a {
    display: block;
    background-color: #d8e3e3;
    color: #444;
    border-radius: 6px;
    font-size: 14px;
    line-height: 24px;
    padding: 0 16px;
    font-weight: bold;
    box-sizing: border-box;
    border: solid 1px transparent;
    margin-right: 8px;

    &:hover {
      border: solid 1px #444;
    }
  }
}

.om__single-post {
  .container {
    padding: 0;
  }

  .sw-container {
    max-width: 1280px;
    padding: 0 1.5rem;
    margin: 0 auto;
  }

  .single__post-content {
    font-family: "Roboto";
    font-size: 20px;
    line-height: 32px;
    color: #444444;
    h2 {
      font-family: "Roboto";
      font-size: 30px;
      color: #111;
      font-weight: bold;
      line-height: 40px;
      margin: 16px 0 16px 0;
      padding: 0;
    }
    img {
      max-width: 100%;
      height: auto !important;
    }
    a {
      color: #006482;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      &:hover {
        text-decoration-thickness: 2px;
      }
    }
  }
  .share__links {
    display: flex;
    align-items: flex-start;
    padding: 112px 0 40px 0;
    position: relative;
    width: max-content;
    span {
      font-family: "Roboto";
      font-size: 16px;
      line-height: 24px;
      font-weight: bold;
      color: #444444;
      margin-right: 16px;
      align-self: center;
    }
    a {
      color: #006482;
      height: 32px;
      margin-right: 16px;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      cursor: pointer;

      svg {
        fill: #111;
        transition: all 0.4s ease;
        height: 32px;
        width: 32px;
      }
      i {
        font-size: 25px;
      }

      &:hover {
        svg {
          fill: #ff6200;
        }
      }
    }
    .copy-popup {
      position: absolute;
      bottom: 56px;
      right: 30px;
      background-color: rgba(17, 17, 17, 0.8);
      color: #fff;
      padding: 10px 15px;
      border-radius: 5px;
      font-size: 14px;
      width: max-content;
      box-shadow: 0 2px 5px rgba(17, 17, 17, 0.2);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      &.visible {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .table-of-contents {
    min-width: 224px;
    max-width: 224px;
    padding-bottom: 266px;
  }

  .new-grid {
    display: flex;
    gap: 48px;
  }

  .main-content {
    width: 100%;
  }

  .right-rail {
    min-width: 266px;
    max-width: 266px;
    display: flex;
    flex-direction: column;
    & > * {
      padding-bottom: 48px;
    }
    & > :not(:last-child) {
      border-bottom: 1px solid #d8e3e3;
    }
  }

  .right-rail-related-posts {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .related-headline {
    color: #111111;
    font-size: 22px;
    line-height: 28px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .right-related-post {
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px 0 #00000019;
    &:hover {
      cursor: pointer;
      box-shadow: 0 20px 40px 0 #00000033;
      a {
        text-decoration: underline;
      }
    }

    &:active a {
      color: #003c4e;
      box-shadow: 5px 5px 10px 0 #0000000a;
      text-decoration: underline;
    }
  }

  .related-post-headline {
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    padding: 14px 12px 16px 12px;

    & a {
      color: #000;
    }
  }

  .related-post-image img {
    width: 266px;
    height: 153px;
  }

  .right-rail-author {
    .author-image img {
      width: 112px;
      height: 112px;
      margin-right: 15px;
    }

    .author-data {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .author-name {
      color: #111;
      font-size: 16px;
      line-height: 24px;
      text-decoration: underline;
      font-weight: bold;
      &:hover {
        text-decoration-thickness: 2px;
      }
    }

    .author-title {
      color: #444444;
      font-size: 16px;
      line-height: 24px;
    }

    .author-description {
      padding-top: 16px;
      color: #444444;
      font-size: 16px;
      line-height: 24px;
    }

    .read-more {
      padding-top: 16px;
      display: inline-block;
      color: #006482;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      font-size: 16px;
      line-height: 24px;
      &:hover {
        text-decoration-thickness: 2px;
      }
    }
  }

  .author-top {
    display: flex;
    align-items: center;
    padding-top: 47px;
  }

  .right-tags-text {
    color: #000;
    padding: 47px 0 16px 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
  }

  .right-rail-tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 8px;
  }
}

@media screen and (max-width: 992px) {
  .om__single-post {
    .table-of-contents {
      min-width: none;
      max-width: none;
      padding-bottom: 32px;

      position: -webkit-sticky;
      position: sticky;
      top: 0px;
      padding-top: 32px;
      z-index: 100;
      background: #fff;
    }

    .main-content {
      padding-top: 32px;
    }

    .single__post-content {
      font-size: 16px;
      line-height: 24px;
    }

    .single__post-content h2 {
      font-size: 24px;
      line-height: 36px;
    }

    .share__links {
      padding: 53px 0 24px 0;
    }

    .single__post-tags {
      padding: 24px 0 48px 0;
      row-gap: 24px;
    }
    .new-grid {
      flex-direction: column;
      gap: 0px;
    }

    .right-rail {
      min-width: none;
      max-width: none;

      & > :not(:last-child) {
        border-bottom: 1px solid #a0b9b9;
      }

      & > * {
        padding-bottom: 0px;
      }
    }

    .right-rail-tags-container {
      display: none;
    }

    .right-rail-author {
      padding-bottom: 32px;
    }

    .right-rail-related-posts {
      gap: 0;
    }

    .related-headline {
      margin-bottom: 24px;
    }

    .right-related-post {
      box-shadow: none;
      flex-direction: row;
      padding: 32px 0;
      align-items: center;
      border-top: solid 1px #a0b9b9;

      &:hover {
        box-shadow: none;
      }
    }

    .related-post-image img {
      width: auto;
      max-width: 84px;
      max-height: 50px;
      height: auto;
      margin-right: 16px;
    }

    .related-post-headline {
      padding: 0;
    }

    .single__post-tag a {
      margin-right: 0;
    }
  }
}