.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  /* box-sizing: border-box; */
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  /* display: flex; */
  align-self: center;
  margin: 0 auto;
  max-width: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: var(--Space-20, 20px);
  background: var(--Content-Background, #ECF3F8);
  transition: 0.5s all;
  border: none;
  width: 100%;
  border-image-width: 0;
  background-clip: content-box;
  border-image-outset: 0;
}

.modal:focus-visible {
  outline-width: 0;
}

@media screen and (width <= 500px) {
  .modal{
    max-width: 364px;
    margin: 0px 8px 0px 8px;
    flex: 1 1 0;
  }
}

.modal::backdrop {
  /* position: absolute; */
  display: flex;
  width: 100%;
  height: 100%;
  /* padding: var(--Space-0, 0px) var(--Space-8, 8px); */
  justify-content: center;
  align-items: center;
  gap: var(--Space-0, 0px);
  background: var(--Overlay, rgba(24, 28, 41, 0.80));
  border: none;
  backdrop-filter: none;
}

.modal__image-container{
  position: relative;
  display: flex;
  min-height: 230px;
  padding: var(--Space-0, 0px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--Space-0, 0px);
  align-self: stretch;
  background: var(--Content-Background, #ECF3F8);
}

.modal__description {
  display: flex;
  padding: var(--Space-20, 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-20, 20px);
  align-self: stretch;
  border-radius: var(--Space-20, 20px);
background: var(--Static-White, #FFF);
width: 100%;
}

.description-top,
.description-bottom {
  display: flex;
  padding: var(--Space-0, 0px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Space-8, 8px);
  align-self: stretch;
}

.card__text {
  color: var(--Dark, #181C29);
}

.bottom-container {
  display: flex;
padding: var(--Space-0, 0px);
flex-direction: column;
align-items: flex-start;
gap: var(--Space-0, 0px);
align-self: stretch;
color: var(--Dark, #181C29);
}

.description-bottom h4 {
  color: var(--Dark, #181C29);
}

.row-container {
  display: flex;
padding: var(--Space-0, 0px);
align-items: center;
gap: var(--Space-12, 12px);
align-self: stretch;
}

.grow {
  flex: 1 0 0;
}

.snow-container {
  display: flex;
  padding: var(--Space-0, 0px);
  align-items: flex-start;
  gap: var(--Space-8, 8px);
}

.snowflake {
  width: 16px;
  height: 16px;
}

.snow-container img:nth-child(-n +5){
  opacity: 0.1;
}

.snow-container.snow1 img:nth-child(1),
.snow-container.snow2 img:nth-child(-n +2),
.snow-container.snow3 img:nth-child(-n +3),
.snow-container.snow4 img:nth-child(-n +4),
.snow-container.snow5 img:nth-child(-n +5){
  opacity: 1;
}

.modal[data-for="For Work"] {
  color: var(--Tag-Purple);
}

.modal[data-for="For Work"] .modal__image-container {
  background: url("../assets/images/gift-for-work.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.modal[data-for="For Harmony"] {
  color: var(--Tag-Pink);
}

.modal[data-for="For Harmony"] .modal__image-container {
  background: url("../assets/images/gift-for-harmony.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.modal[data-for="For Health"] {
  color: var(--Tag-Green);
}

.modal[data-for="For Health"] .modal__image-container {
  background: url("../assets/images/gift-for-health.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.modal__button {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
}

.modal__button svg {
 stroke: #181C29;
}

.modal__button:hover svg {
  stroke: rgba(255, 70, 70, 1);
  transition: all .3s ease-in-out
 }