.block__content-links {
  margin-top: 2rem;
  margin-bottom: 2rem;

  @media (min-width: 768px) {
    margin-top: 2rem;
    margin-bottom: 3rem;
  }

  .content {
    display: grid;
    gap: 1.25rem;

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

    @media (min-width: 1200px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .content-links {
    display: flex;
    flex-flow: column;
    row-gap: 1rem;
  }

  .content-links__title {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: bold;
    padding: 1.25rem 1.125rem;
    border-radius: 15px;
  }

  .content-links__content {
    display: flex;
    flex-flow: column;
    row-gap: 1rem;
    height: 100%;
    padding: 1.25rem 1.125rem;
    border-radius: 15px;
  }

  .content-links__links {
    > .field {
      display: flex;
      flex-flow: column;
      row-gap: 1rem;

      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 1rem;
        padding: 1.125rem;
        background-color: var(--color-white);
        text-decoration: none !important;
        border-radius: 10px;

        &:after {
          content: "";
          position: relative;
          height: 16px;
          width: 10px;
          mask-image: url(../../../images/icons/chevron-right-large.svg);
          mask-position: center;
          mask-size: contain;
          background-color: currentColor;
          flex-shrink: 0;
        }
      }
    }
  }
}

.block__content-links.purple {
  color: var(--csa-purple--text);
  .content-links__title {
    background-color: var(--csa-purple--mid);
  }

  .content-links__content {
    background-color: var(--csa-purple--pastel);

    a {
      color: var(--csa-purple--text);

      &:hover,
      &:focus {
        color: var(--csa-purple--link-hover);
      }

      &:focus {
        outline-color: var(--csa-purple--link-hover);
      }
    }
  }
}
.block__content-links.green {
  color: var(--csa-green--text);
  .content-links__title {
    background-color: var(--csa-green--mid);
  }

  .content-links__content {
    background-color: var(--csa-green--pastel);

    a {
      color: var(--csa-green--text);

      &:hover,
      &:focus {
        color: var(--csa-green--link-hover);
      }

      &:focus {
        outline-color: var(--csa-green--link-hover);
      }
    }
  }
}
.block__content-links.teal {
  color: var(--csa-teal--text);
  .content-links__title {
    background-color: var(--csa-teal--mid);
  }

  .content-links__content {
    background-color: var(--csa-teal--pastel);

    a {
      color: var(--csa-teal--text);

      &:hover,
      &:focus {
        color: var(--csa-teal--link-hover);
      }

      &:focus {
        outline-color: var(--csa-teal--link-hover);
      }
    }
  }
}
.block__content-links.blue {
  color: var(--csa-blue--text);
  .content-links__title {
    background-color: var(--csa-blue--mid);
  }

  .content-links__content {
    background-color: var(--csa-blue--pastel);

    a {
      color: var(--csa-blue--text);

      &:hover,
      &:focus {
        color: var(--csa-blue--link-hover);
      }

      &:focus {
        outline-color: var(--csa-blue--link-hover);
      }
    }
  }
}
.block__content-links.red {
  color: var(--csa-red--text);
  .content-links__title {
    background-color: var(--csa-red--mid);
  }

  .content-links__content {
    background-color: var(--csa-red--pastel);

    a {
      color: var(--csa-red--text);

      &:hover,
      &:focus {
        color: var(--csa-red--link-hover);
      }

      &:focus {
        outline-color: var(--csa-red--link-hover);
      }
    }
  }
}