.section-ingredient-display {
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-background));
}

.block-ingredient-display__image-text-card-wrapper {
  position: relative;
  flex: 1;
  background-color: transparent;
}

.block-ingredient-display__image-text-card {
  color: rgb(var(--color-text));
  background-color: transparent;
}

.block-ingredient-display__image-text-card .card-image,
.block-ingredient-display__image-text-card .card-text {
  flex: 1;
  min-width: 0;
}

.block-ingredient-display__image-text-card .card-image {
  align-self: stretch;
}

.block-ingredient-display__image-text-area .area-image,
.block-ingredient-display__image-text-area .area-card {
  flex: 1;
  align-self: stretch;
  min-width: 0;
}

.block-ingredient-display__image-text-area.card-style
  .block-ingredient-display__image-text-card-wrapper,
.block-ingredient-display__image-text-area.card-style
  .block-ingredient-display__image-text-card {
  background-color: rgb(var(--color-background));
}

.block-ingredient-display__image-text-area.card-style
  .block-ingredient-display__image-text-card-wrapper {
  padding: 10px;
}

.block-ingredient-display__image-text-area.image-text-overlay .card-text {
  flex: 0;
}

.block-ingredient-display__image-text-area.image-text-overlay
  .block-ingredient-display__image-text-card-text-group {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.section-ingredient-display__button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-block-start: 40px;
}

@media (max-width: 767px) {
  .section-ingredient-display__button {
    margin-block-start: 24px;
  }
}

.section-ingredient-display__button .button {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--color-text));
  background-color: transparent;
  border: 1px solid #636363;
  border-radius: 0;
  box-shadow: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* the theme paints the border/rounding through ::after — neutralise it */
.section-ingredient-display__button .button::after {
  border-radius: 0;
  box-shadow: none;
}

/* beats the homepage-wide button invert rule, which uses !important */
.section-ingredient-display__button .button:not([disabled]):hover {
  color: rgb(var(--color-background)) !important;
  background-color: rgb(var(--color-text)) !important;
  border-color: rgb(var(--color-text)) !important;
}

.section-ingredient-display__button .button:not([disabled]):hover::after {
  box-shadow: none !important;
}