.viewer-contents {
  h2 {
    margin: 0 0 1.4em;
    font-size: var(--fs-3xl);
    text-align: center;
    line-height: 90%;
    letter-spacing: -2.25px;
  }

  .viewer-contents-sides {
    display: grid;
    grid-template-columns: 600px 300px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;

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

    .viewer-contents-left {
      .viewer_holder {
        height: 320px;
        margin-bottom: 24px;
      }

      .cta {
        display: flex;
        justify-content: center;

        @media (max-width: 1024px) {
          display: none;
        }
      }
    }

    .viewer-contents-right {
      .resources-title {
        position: relative;
        height: 48px;
        margin-bottom: 24px;
        border-radius: 3px;
        border: 1px solid #181818;
        background: var(--c-gray-25);

        h2 {
          margin: 0;
          width: 100%;
          height: 100%;
          color: #000;
          text-align: center;
          font-weight: 700;
          font-size: 30px;
          line-height: 110%;
          border: 1px solid #181818;
          background: #fffaee;
          border-radius: 3px;

          display: flex;
          justify-content: center;
          align-items: center;

          position: absolute;
          top: -10px;
          left: 10px;
          z-index: 3;

          @media (max-width: 1024px) {
            font-size: 30px;
          }
        }

        >div {
          width: 100%;
          height: 100%;
          border-radius: 3px;
          background: #fffaee;
          z-index: 1;

          &:nth-child(2) {
            border: 1px solid #181818;
            position: absolute;
            top: -5px;
            left: 4px;
            z-index: 2;
          }
        }
      }

      .resources-items {
        display: flex;
        flex-direction: column;
        border: 1px solid #181818;
        border-radius: 5px;

        .resources-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 13.5px 22px;
          gap: 16px;
          border-bottom: 1px solid #181818;

          &:last-child {
            border-bottom: none;
          }

          svg {
            width: 24px;
            height: 24px;
          }

          img {
            width: 24px;
            height: 24px;
          }

          span {
            flex: 1;
            font-family: var(--ff-primary);
            font-style: normal;
            font-weight: 400;
            font-size: 17px;
            line-height: 1.5;
            color: #181818;
          }
        }
      }
    }
  }
}