#offers div {
  overflow: hidden;
  height: 6.75rem;
  --bs-bg-opacity: var(--bg-opacity);
}

.menutitle,
.introtext {
  display: block;
  transition: transform 0.5s ease 0.3s;
}

.menutitle {
  white-space: nowrap; /* stays one line */
  transform: translateY(.5rem);
  transition-delay: 0.3s;
}

.introtext {
  white-space: normal; /* wraps into multiple lines */
  transform: translateY(3.7rem);
  font-size: 1.25rem;
  cursor: pointer;
}

.introtext a {
  color: inherit;
  text-decoration: inherit;
}

.text-wrapper .introtext {
  color: var(--fg-personaris);
}

/* expanded height for 3 lines */
.text-wrapper:hover,
.text-wrapper:focus,
.text-wrapper:active {
  /*height: 3.6em; /* 3 lines × 1.2em */
}

/* slide both texts upward */
.text-wrapper:hover .menutitle,
.text-wrapper:focus .menutitle,
.text-wrapper:active .menutitle {
  transform: translateY(-4rem);
  transition-delay: 0.3s;
}

.text-wrapper:hover .introtext,
.text-wrapper:focus .introtext,
.text-wrapper:active .introtext {
  transform: translateY(-3.75rem);
  transition-delay: 0.3s;
}

@media (min-width: 768px) and (min-height: 1200px) {
  #offers {
    margin-top: 14%;
  }
}

@media (min-width: 768px) and (min-height: 900px) {
  #offers {
    margin-top: 5%;
  }
}

@media (min-width: 768px) {
  .panel-content {
    max-width: 100%;
    text-align: right;
  }
}



@media (max-width: 767.98px) {
  .text-wrapper:hover .introtext,
  .text-wrapper:focus .introtext,
  .text-wrapper:active .introtext {
    transform: translateY(-3.4rem);
  }
}