#capacitation {
  & > .container > .content {
    --radius: 3rem;
    border: 2px solid black;
    border-radius: var(--radius);
    padding: 1.5rem;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    @media (max-width: 1024px) {
      &.content > * {
        grid-column: 1 / span 12 !important;
      }

      &.content > .heading {
        grid-row: 1;
      }

      &.content > .body {
        grid-row: 2;
        margin-bottom: 2rem;
      }

      &.content > .image {
        grid-row: 3;
        margin-bottom: 2rem;

        img {
          min-height: 300px;
        }
      }

      &.content > .call_to_action {
        grid-row: 4;
      }
    }

    & .heading {
      grid-column: 1 / span 4;
      grid-row: 1;
      display: grid;

      & .title {
        margin: 0;
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1;
      }

      & .subtitle {
        text-align: justify;
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 1.5;
      }
    }

    & .body {
      text-align: justify;
      grid-column: 6 / span 7;
      grid-row: 1 / span 2;
      line-height: 1.75;
      margin-bottom: 5rem;

      > p {
        margin: 0;
      }
    }

    & .call_to_action {
      display: grid;
      align-items: end;
      align-content: end;
      padding: 2rem;
      grid-column: 1 / span 3;
      grid-row: 3;
      gap: 6rem;
      background-color: var(--purple-main);
      border-radius: var(--radius);
      text-align: center;
      position: relative;

      &::before {
        /* content: ""; */
        position: absolute;
        top: -70px;
        left: 0;
        width: 100%;
        height: 180px;
        background-color: var(--purple-main);
        border-radius: 2rem 5.5rem 0 0;
        transform: skewY(-20deg);
        z-index: -1;
      }

      & .label {
        color: white;
        font-size: 1.35rem;
        font-weight: 400;
        line-height: 1.5;
      }

      & button {
        padding: .75rem 2rem;
        background-color: white;
        border: none;
        color: black;
        font-weight: 500;
        font-size: 1.25rem;
      }

    }

    & .image {
      grid-column: 5 / span 8;
      grid-row: 3;
      background-color: black;
      border-radius: 2rem;
      box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.33);

      & img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: var(--radius);
        max-height: 400px;
      }
    }
  }
}