.books {
  padding-top: 70px;
  border-top: 1px solid #191919;
  @media (max-width: 1024px) {
    padding-top: 50px;
  }
  @media (max-width: 768px) {
    padding-top: 40px;
  }
  .section-container {
    h2 {
      margin-top: 0;
      margin-bottom: 40px;
      text-align: center;
      @media (max-width: 1024px) {
        margin-top: var(--g-md);
      }
    }
    .book-items {
      display: flex;
      justify-content: space-around;
      gap: var(--sp-sm);

      @media (max-width: 768px) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      article {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--g-md);
        max-width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: var(--g-md);
        figure {
          position: relative;
          width: 140px;
          height: 200px;
          img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
          }
        }
        .book-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          .book-top {
            flex: 1;
            h3 {
              margin-block: 0px 16px;
            }
            h5 {
              margin-block: 16px;
              color: var(--c-primary-200);
              font-weight: 700;
              @media (max-width: 768px) {
                margin-block: 8px;
              }
            }
            .text {
              font-size: var(--fs-md);
            }
          }
        }
      }
    }
  }
  &.tiles {
    padding-top: 0;
    border-top: none;
    .section-container {
      .book-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--g-md);
        align-items: stretch;
        @media (max-width: 768px) {
          grid-template-columns: 1fr;
        }
        article {
          max-width: none;
        }
      }
    }
  }
}