Widget:SearchQuestStyle

a {

   text-decoration: none;
   color: inherit;

}

1. quests-container {

   padding: 1rem 2rem;
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
   gap: 1.5rem;

}

1. quests-form {

   padding: 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;

}

.level {

 opacity: .6;
 font-size: .8rem;
 letter-spacing: .05rem;
 padding-inline-start: .2rem;

}

.card {

   width: clamp(37rem, 2vw, 44rem);
   height: clamp(11rem, 2vh, 14rem);
   display: flex;
   align-items: flex-start;

   gap: .725rem;
   border-radius: 8px;
   overflow: hidden;
   border: 2px solid #9D72D6;

}

.card main {

   flex-basis: 60%;
   height: 100%;
   padding: 1rem;

}

.card main h2 {

   font-size: 1.5rem;
   font-weight: 500;
   color: #200245;
   margin-bottom: .35rem;

}

.description-container {

   display: -webkit-box;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   -ms-box-orient: vertical;
   box-orient: vertical;
   -webkit-line-clamp: 5;
   -moz-line-clamp: 5;
   -ms-line-clamp: 5;
   line-clamp: 5;
   overflow: hidden;

   text-overflow: ellipsis;
   overflow: hidden;

}

.card main p {

   font-size: clamp(.75rem, 1vw, .8rem);
   font-weight: 400;
   text-align: justify;
   color: #717072;

}

aside {

   flex-basis: 40%;
   height: 100%;
   aspect-ratio: 9/7;

   display: flex;
   align-items: stretch;
   overflow: hidden;

}

aside img {

   width: 103%;
   height: auto;
   transition: transform .25s ease;

}

.card:hover aside img {

   transform: scale(1.17) rotate(2.5deg);

}

.icon-container {

   display: flex;
   align-items: flex-start;
   gap: .5rem;

   margin-block-end: .3rem;

}

.icon-container img {

   width: 16px;

}

.d-flex {

   display: flex;
   gap: 1.5rem;

}