@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
  --white: hsl(0, 0%, 100%);
  --light-pink: hsl(275, 100%, 97%);
  --grayish-purple: hsl(292, 16%, 49%);
  --dark-purple: hsl(292, 42%, 14%);
}
body{
   font-family: 'Work Sans', serif;
   color: var(--dark-purple); 
   display: grid;
   place-items: center;
   min-height: 100vh;
   background-image: url(assets/images/background-pattern-mobile.svg);
    background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: top;
   background-color: var(--light-pink);
}
main{
    background-color: var(--white);
    padding: 1.8em;
    border-radius:  1.0em;
}
.about-container{
    display: grid;
    grid-template-columns: 4em 6em;
}
#decorative-img{
    align-self: center;
}
.faq-item {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 4em;
}
q{
    quotes: none;
    font-weight: 700;
    display: inline-block;
    max-width: 22ch;
    grid-row: 1 / 2;
}
q:hover{
    color: hsl(293, 78%, 44%);
    cursor: pointer;
}
blockquote {
  display: none;
  min-width: 100%;
  margin-left: 0;
  color: var(--grayish-purple);
  grid-column: 1 / 3;
}
button{
    border: none;
    background: none;
    text-align: right;
    grid-row: 1 / 2;
}
hr{
    border: 1px solid hsl(296, 30%, 91%);;
    border-top: none;
}
@media screen and (min-width: 500px) {
     body{
        background-image: url("assets/images/background-pattern-desktop.svg");
        background-position: top;
     }
     .faq-item {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr 4em;
    }
    q{
        max-width: 100%;
    }
    blockquote{
        max-width: 45vw;
    }
}