#history {
  background-color: var(--background);

  .content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-auto-rows: auto;
    gap: 2rem 4rem;

    .heading {
      display: contents;
      align-items: center;
      gap: 1.875rem;

      p {
        font-size: 20px;
        font-weight: 400;
        line-height: 2rem;
        margin: 0;
      }

      h2 {
        font-size: 3.5rem;
        font-weight: 400;
        line-height: 1;
        align-self: end;
        margin: 0;
      }

      h4 {
        font-size: 1.5rem;
        font-weight: 400;
        grid-column: 1;
        margin: 0;
        align-self: start;
      }

      .body {
        grid-column: 2;
        grid-row: 1 / span 2;
      }
    }

    .image {
      display: contents;

      img {
        padding-bottom: 1.5rem;
        grid-column: span 2;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 3rem;
        overflow: hidden;
      }
    }

    .know-more {
      display: contents;

      & > * {
        margin: 0;
      }

      .title {
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1.125;
      }

      .body {
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.5;

        display: grid;
        gap: 1rem;

        p {
          font-weight: 400;
          margin: 0;
        }

        button {
          padding-block: .75rem;
        }
      }
    }

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

      * {
        grid-column: 1 !important;
      }

      a {
        text-align: center;
      }
    }
  }

  .links {
    padding-block: 4rem;
    gap: 1rem;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    --background: white;

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

      & > * {
        grid-column: 1 !important;
      }
    }

    &:has(> :nth-child(3n - 1):last-child) .link:nth-last-child(2) {
      grid-column-start: 2;
    }

    &:has(> :nth-child(3n - 2):last-child) .link:nth-last-child(1) {
      grid-column-start: 3;
    }

    .link {
      grid-column-end: span 2;
      display: grid;
      gap: 1rem;
      background-color: var(--background);
      border-radius: 1.125rem;
      padding: 1.25rem 2rem;
      border: 1px solid black;


      .count {
        font-size: .875rem;
      }

      .title {
        font-size: 1.75rem;
        font-weight: 500;
        text-align: center;
      }

      a {
        font-family: 'Helvetica Neue', sans-serif;
        font-weight: light;
        color: black;
        padding-inline: 1rem;
      }
    }
  }
}