.meal-card {
  position: relative;

  background-color: var(--bg-primary);
}

.meal__description,
.meal__informations {
  box-shadow: var(--shadow-primary);
  border-radius: 12px;
}

.meal__description {
  position: relative;

  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.meal-heading {
  display: flex;
  align-items: center;
  gap: 24px;
}

.meal__informations {
  z-index: 1;
  width: 100%;

  overflow: hidden;
  transition: max-height 0.4s;
}

.meal__informations-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;

  padding: 16px 24px;
  background-color: var(--bg-primary);
}

.meal__informations ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meal__toggle-button {
  transition: transform 0.4s;
}
