.block__card-deck {
  padding: 2rem 0;

  @media (min-width: 768px) {
    padding: 3rem 0;
  }

  h2 {
    margin-bottom: 0;
    font-weight: bold;
  }

  .container {
    display: flex;
    flex-flow: column;
    row-gap: 2rem;
  }

  .cards {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;

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

    @media (min-width: 1200px) {
      column-gap: 2.625rem;
      grid-template-columns: repeat(4, 1fr);
    }

    .card__link {
      text-decoration: none;

      &:hover,
      &:focus {
        color: currentColor;

        .card-deck__card .card__button {
          width: 100%;

          svg {
            right: 16px;
            transform: translateX(0) translateY(-50%);
          }
        }
      }

      .card-deck__card {
        display: flex;
        flex-flow: column;
        row-gap: 1rem;
        background-color: var(--color-white);
        padding: 1.375rem 1.375rem 1rem;
        height: 100%;
        border-radius: 10px;

        .card__text {
          font-size: 1.5rem;
          line-height: 1;
        }

        .card__button {
          --duration: .3s;
          position: relative;
          width: 3rem;
          height: 3rem;
          padding: 0 25px;
          border-radius: 30px;
          margin-top: auto;
          transition: width var(--duration) ease-in-out, background-color var(--duration) ease-in-out;

          svg {
            position: absolute;
            right: 50%;
            top: 50%;
            transform: translateX(50%) translateY(-50%);
            transition: right var(--duration) ease-in-out, transform var(--duration) ease-in-out, color .1s ease-in-out;
          }
        }
      }

    }
  }
}

.block__card-deck.purple {
  background-color: var(--csa-purple--pastel);

    .card__link {
      &:hover,
      &:focus {
        .card-deck__card .card__button {
          background-color: var(--csa-purple);

          svg {
            color: var(--color-white);
          }
        }
      }
    }

    .card-deck__card {
      .card__button {
        background-color: var(--csa-purple--mid);
      }
    }
  }

  .block__card-deck.green {
    background-color: var(--csa-green--pastel);

    .card__link {
      &:hover,
      &:focus {
        .card-deck__card .card__button {
          background-color: var(--csa-green);

          svg {
            color: var(--color-white);
          }
        }
      }
    }


    .card-deck__card {
      .card__button {
        background-color: var(--csa-green--mid);

      }
    }
  }

  .block__card-deck.teal {
    background-color: var(--csa-teal--pastel);

    .card__link {
      &:hover,
      &:focus {
        .card-deck__card .card__button {
          background-color: var(--csa-teal);

          svg {
            color: var(--color-white);
          }
        }
      }
    }

    .card-deck__card {
      .card__button {
        background-color: var(--csa-teal--mid);

      }
    }
  }

  .block__card-deck.blue {
    background-color: var(--csa-blue--pastel);

    .card__link {
      &:hover,
      &:focus {
        .card-deck__card .card__button {
          background-color: var(--csa-blue);

          svg {
            color: var(--color-white);
          }
        }
      }
    }

    .card-deck__card {
      .card__button {
        background-color: var(--csa-blue--mid);
      }
    }
  }

  .block__card-deck.red {
    background-color: var(--csa-red--pastel);

    .card__link {
      &:hover,
      &:focus {
        .card-deck__card .card__button {
          background-color: var(--csa-red);

          svg {
            color: var(--color-white);
          }
        }
      }
    }

    .card-deck__card {
      .card__button {
        background-color: var(--csa-red--mid);
      }
    }
  }