*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
  font-family: WorkSans;
 font-style: normal;
  font-weight:400 600 700;
 font-display: swap;
  src: url(./assets/fonts/WorkSans-VariableFont_wght.ttf) format("woff2");
}



:root {
  --White: hsl(0, 100%, 100%);
  --Purple-100: hsl(275, 100%, 97%);
  --Purple-600: hsl(292, 16%, 49%);
  --Purple-950: hsl(292, 42%, 14%);
  --Light-Purple: rgb(173, 40, 235);
  --Font-WorkSans: 'WorkSans';
}


body{
    font-family: var(--Font-WorkSans);
    background-color: var(--Purple-100);
    /*centrar*/
    height: 100vh;
    display: grid;
    place-content: center;

    background-image: url(./assets/images/background-pattern-mobile.svg);
    background-repeat: no-repeat;
    background-size: contain;


}

.card{
    background-color: var(--White);
    width: 327px;
    padding: 24px;
    border-radius: 8px;

    & .title-container{
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
         & .star{
            width: 20px;

         }
         & .title{
            font-size: 2rem;
         }
    }
    & .faq{
        
        &[open] .icon-btn{
            content: url('./assets/images/icon-minus.svg');
        }

        & .question-container{

        display: flex;
        justify-content: space-between;
        padding: 24px 0;
        cursor: pointer;

            & .question{
            font-weight: 600;
            width: 220px;
                }
          
            }
        & .question-container:hover{
            color: var(--Light-Purple);
        }    
        
        & .description{
        font-size: 14px;
        font-weight: 400;
        color: var(--Purple-600);
        line-height: 1.5;

        }

    }
    & .faq:not(:last-child){
          border-bottom: 2px solid var(--Purple-100);
    }
}

@media screen and (min-width: 620px){

    body{
        background-image: url(./assets/images/background-pattern-desktop.svg);

        
    }

    .card{
        width: 600px;

        & .faq{
            & .question-container{
                & .question{
                    width: unset;
                    font-size: 1.25rem;

                    }
            }
        }
    }

}