.summaryLayout {
  border-radius: 1.6rem;
  background: var(--operator-summery-backgorund, #fff);
  box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.02), 0px 12px 16px -4px rgba(27, 27, 28, 0.05);
  width: calc(100% - 32px);
  padding: 0 1.6rem;
  max-width: calc(var(--main-container-max) - 4.8rem) !important;
  margin: 0 auto;
  // Bonus module
  > div:last-of-type:not(.tnc) {
    padding-bottom: 2.4rem;
    > div {
      @include min(tablet) {
        padding: 1.6rem;
      }
      > div {
        //img, details and onliner
        @include flex-direction(row);

        > a {
          // hide deatils
          height: 4rem;
          > div {
            display: none;
            @include min(laptop) {
              display: block;
              min-width: 12rem;
            }
          }
          > img {
            width: 4rem;
            height: 4rem;
            min-width: 4rem;
          }
          @include min(tablet) {
            height: 6.4rem;
            > img {
              width: 6.4rem;
              height: 6.4rem;
              min-width: 6.4rem;
            }
          }
        }
        // onliner
        > div {
          background-color: transparent;
          border: 0;
          height: fit-content;
          min-height: fit-content;
          align-items: start;
          > span {
            text-align: left;
            margin: 0;
            display: inline-block;
            color: #1b1b1c;
            font-size: 1.2rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.8rem;
          }
          @include min(tablet) {
            border-radius: 8px;
            background: #fff;
            min-height: 6.4rem;
            @include flex-direction(column);
            @include flex-align(center, center);
            > span {
              font-weight: 700;
              &:first-of-type {
                font-size: 1.6rem;
                line-height: 2.7rem;
              }
              &:last-of-type {
                font-size: 1.4rem;
                line-height: 2.2rem;
              }
            }
          }
        }
      }
    }
  }
}

.details {
  box-sizing: border-box;
  h2 {
    padding: 2.4rem 0;
    margin: 0;
    color: #1b1b1c;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.2rem;
    text-transform: capitalize;
    @include min(tablet) {
      font-size: 3.2rem;
      line-height: 4rem;
    }
  }
}

.tncContainer {
  > div:last-of-type:not(.tnc) {
    padding-bottom: 0rem;
  }
}

.description {
  color: #515156;
  text-align: justify;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.7rem;
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
}

.author {
  @include flex-direction(row);
  @include flex-align(center, flex-start);
  gap: 1.6rem;
  margin-bottom: 3.2rem;
  > img {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 100%;
  }
  > div {
    @include flex-direction(column);
    > span:first-of-type {
      color: #1b1b1c;
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 700;
      line-height: 2.4rem;
    }
    > span:last-of-type {
      color: #515156;
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 700;
      line-height: 2.2rem;
    }
  }
}

.tnc {
  display: block;
  padding-top: 0.8rem;
  padding-bottom: 2.4rem;
}
