.lifelong_learning {
  background: var(--color-primary-low);

  .lifelong_learning_wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 32px 0 0;

    @media (min-width: 1024px) {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(2, 1fr);
    }

    >div {
      padding: 24px;
      border-radius: 20px;

      background: #FFFFFF;

      @media (min-width: 1024px) {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 24px;
      }

      &.lifelong_learning_de {
        >div[data-gallery="true"] {
          >div[data-gallery-item] {
            padding: 0;
          }
        }
      }

      &.lifelong_learning_cfc {
        >div[data-gallery="true"] {
          >div[data-gallery-item] {
            padding: 0;
          }
        }
      }

      >p {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;

        color: var(--primary-color);

        padding: 2px 8px;
        border-radius: 8px;
        background: var(--green-color);

        width: max-content;
      }

      >span {
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -1%;
        ;

        color: var(--primary-color);
        margin: 12px 0;
      }

      >div[data-gallery="true"] {
        display: grid;
        grid-template-columns: repeat(2, 140px);
        row-gap: 12px;
        column-gap: 16px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;

        >div[data-gallery-item] {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          width: 140px;
          height: 64px;
          padding: 12px;

          >img {
            width: 100%;
            height: 100%;
            margin: auto;
            object-fit: contain;
            object-position: center;
          }
        }
      }

      >div[data-programs="true"] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        >p {
          padding: 2px 8px;
          background: #0017450D;
          border-radius: 8px;

          font-size: 14px;
          font-weight: 600;
          line-height: 20px;

          color: var(--primary-color);
          width: max-content;
        }
      }

      >div {
        margin: 0 0 16px;

        @media (min-width: 1024px) {
          margin: 0 0 12px;
        }
      }

      >a {
        color: var(--color-primary-mid);

        font-weight: 600;
        font-size: 16px;
        line-height: 20px;

        max-width: max-content;

        transition: all .3s ease-in-out;

        @media (min-width: 1024px) {
          font-size: 16px;
          line-height: 24px;
          margin-top: auto;
        }

        &:hover {
          text-decoration: underline;
          opacity: .8;
        }

        &:active {
          text-decoration: underline;
          opacity: .6;
        }
      }
    }
  }
}