.three-column-list {
  margin-block-end: 0;
  container: content-card / inline-size;

  >li {
    grid-template-areas:
      "left left left center center center center center center . right right";

    h2 {
      grid-area: left;
      margin-block-end: 0;
    }

    picture {
      grid-area: right;
    }

    &:last-of-type {
      border-block-end: none;
    }

    box-wrapper {
      margin-inline-start: 0;
      max-width: 100%;

      p+p,
      p+ul,
      ul+p,
      p+img,
      a+p {
        margin-block-start: var(--sp-20);
      }

      a {
        margin-inline-start: 0;
        margin-block-start: var(--sp-40-20);
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);

        li {
          display: grid;
          grid-template-columns: auto 1fr;
          column-gap: var(--sp-8);

          &::before {
            content: "•";
            font-family: var(--f-rr);
            font-size: var(--fs-18-16);
            letter-spacing: var(--zero);
            line-height: var(--lh-150);
          }
        }
      }
    }

    @media (hover: hover) {
      &:hover {
        background-color: transparent;

        box-wrapper a {
          padding: var(--sp-16) var(--sp-20);
          gap: var(--sp-8);
          background-color: var(--main-tint-30);

          &:hover {
            background-color: var(--main-tint-8);
          }
        }
      }
    }

    @container (inline-size < 46.875rem) {
      grid-template-areas:
        "left left left left left left left left left right right right"
        "center center center center center center center center center right right right";
    }

    @container (inline-size < 31.25rem) {
      grid-template-areas:
        "left left left left left left left left left left left left"
        "center center center center center center center center center center center center"
        "right right right right right right right right right right right right";
    }
  }
}

/* special CSS */
p~#dafdirectdiv {
  margin-block-start: var(--sp-20);
}
.three-column-list {
  >li,
  >li:hover {
    #dafdirectdiv {
      width: fit-content;
      
      a {
        padding: unset;
        gap: 0;
        background-color: transparent;
        width: fit-content !important;
      }
    }
  }
}