/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Card */

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 1280px) {
  .card {
    align-items: flex-start;
  }
}

.card-white {
  background-color: var(--white);
}

.card-creme {
  background-color: var(--creme);
}

.card-first {
  border-radius: 1.8rem 0 0 0;
}

@media (min-width: 768px) {
  .card-first {
    border-radius: 3.6rem 0 0 0;
  }
}

.card-last {
  border-radius: 0 0 1.8rem 0;
}

@media (min-width: 768px) {
  .card-last {
    border-radius: 0 0 3.6rem 0;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Image */

.card-image {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  width: 100%;
  pointer-events: none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Content Container */

.card-content-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3.6rem;
  height: 100%;
  padding: 3.6rem 2.4rem;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Title */

.card-title {
  margin-bottom: 0 !important;
}

@media (min-width: 1280px) {
  .card-title {
    align-self: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Text */

.card-text {
  margin-bottom: 0 !important;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* List */

.card-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  list-style: disc;
  list-style-position: inside;
}

@media (min-width: 1280px) {
  .card-list {
    align-items: flex-start;
    align-self: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Note */

.card-note {
  font-family: quicksand, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--grey);
}

@media (min-width: 1280px) {
  .card-note {
    align-self: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Button Container */

.card-button-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: flex-end;
  align-items: center;
  gap: 2.4rem;
  margin-top: auto;
}

@media (min-width: 1280px) {
  .card-button-container {
    align-self: flex-start;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
/* CTAs */

.card-cta-one {
  border-radius: 1.8rem 0 0 0 !important;
  width: 26.158rem !important;
}

.card-cta-two {
  border-radius: 0 0 1.8rem 0 !important;
  color: var(--white) !important;
  background-color: var(--grey) !important;
}

.card-cta-two:focus {
  color: var(--white) !important;
  background-color: var(--grey) !important;
}

.card-cta-two:focus-visible {
  color: var(--grey) !important;
  background-color: var(--pink) !important;
}

.card-cta-two:active {
  color: var(--grey) !important;
  background-color: var(--pink) !important;
}

@media (min-width: 1280px) {
  .card-cta-two:hover {
    color: var(--grey) !important;
    background-color: var(--pink) !important;
  }

  .card-cta-two:active {
    color: var(--white) !important;
    background-color: var(--grey) !important;
  }
}