* .categories {
  box-sizing: border-box;
}
.categories {
  background-color: #dccdf6;
  margin: 0.7em 1em;
}
.frame-1 {
  position: relative;
  width: 100%;
  /* height: 343px; */
  padding: 1em;
  background: #f9d2ff;
  /* #fff8e4; */
  display: grid;
  grid-template-rows: 60px 3fr;
  border-radius: 1em;
  grid-gap: 1em;
}

.frame-1 .button-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.frame-1 .button-wrapper {
  grid-row: 2/ 3;
}
.button-wrapper .card {
  /*   position: absolute; */
  width: 94px;
  height: 31px;
  /*left: 60px;
  top: 108px; */
  background: #dc9ee3;
  /* #fce38d; */
  border: 1px solid #000000;
  border-radius: 20px;
  box-sizing: border-box;
}
.button-wrapper .card span {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */

  text-align: center;
  letter-spacing: 0.025em;

  color: #000000;
  position: relative;
  top: 5px;
  left: 20px;
}
.button-wrapper .card:hover {
  background: #ac7ffa;
  /* #ffd749; */
}
/* .card:active{
    background: #FFD749;
  } */
.frame-1 h1 {
  /* position: absolute; */
  width: 149px;
  height: 41px;
  /* left: calc(50% - 149px/2 - 232.5px);
  top: calc(50% - 41px/2 - 90px); */

  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  display: flex;
  align-items: center;
  letter-spacing: 0.025em;

  color: #000000;
}