:root{--color-primary-1: hsl(260, 100%, 95%);--color-primary-2: hsl(264, 82%, 80%);--color-primary-3: hsl(263, 55%, 52%);--color-bg: hsl(261, 100%, 97%);--color-surface-1: hsl(0, 0%, 100%);--color-surface-2: hsl(217, 19%, 35%);--color-surface-3: hsl(219, 29%, 14%);--color-surface-4: hsl(240, 22%, 15%);--color-border-1: hsl(0, 0%, 81%);--color-text-0: hsl(0, 0%, 100%);--color-text-1: hsl(217, 19%, 35%);--color-text-2: hsl(224, 10%, 45%);--color-text-3: hsl(0, 0%, 81%);--color-text-4: hsl(0, 0%, 100%);--color-text-5: hsl(240, 13%, 80%);--color-shadow: hsl(0, 0%, 81%);--spacing-sm-1: 0.5rem;--spacing-sm-2: 0.75rem;--spacing-md-1: 1rem;--spacing-md-2: 1.5rem;--spacing-lg-1: 2rem;--spacing-lg-2: 2.75rem;--spacing-xl: 3.5rem}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:.8125rem}body{min-height:100vh;font-family:"Barlow Semi Condensed",Arial,Helvetica,sans-serif;background-color:var(--color-bg)}img,picture{max-width:100%;display:block}p{line-height:1.5;font-weight:500}h2,strong{font-weight:600}main{display:grid;place-content:center;min-height:95vh}.card-section{display:grid;gap:var(--spacing-lg-2);margin-inline:auto;padding:var(--spacing-xl) var(--spacing-lg-2);width:-moz-fit-content;width:fit-content;min-width:27.69rem}.card-section>[class|=card]:nth-child(1){animation-delay:0s}.card-section>[class|=card]:nth-child(2){animation-delay:0.1s}.card-section>[class|=card]:nth-child(3){animation-delay:0.2s}.card-section>[class|=card]:nth-child(4){animation-delay:0.3s}.card-section>[class|=card]:nth-child(5){animation-delay:0.4s}.card,.card--charcoal-blue,.card--charcoal-blue--quote,.card--dark-blue,.card--dark-blue--quote,.card--grey,.card--grey--quote,.card--purple,.card--purple--quote,.card--quote{position:relative;display:grid;gap:var(--spacing-md-1);border-radius:.5rem;max-width:23.08rem;padding:var(--spacing-lg-2);background-color:var(--color-surface-1);box-shadow:35px 50px 20px 0px var(--color-border-1);transition:transform .15s ease-in-out;animation:fade-in .5s ease-in-out forwards,offset-left-to-origin .5s ease-in-out;opacity:0}.card:hover,.card--charcoal-blue:hover,.card--charcoal-blue--quote:hover,.card--dark-blue:hover,.card--dark-blue--quote:hover,.card--grey:hover,.card--grey--quote:hover,.card--purple:hover,.card--purple--quote:hover,.card--quote:hover{transform:translateX(0) scale(1.05)}.card__user,.card__title,.card__paragraph{z-index:2}.card__user-name,.card__title{color:var(--color-text-1)}.card__user-status,.card__paragraph{color:var(--color-text-2)}.card__user{display:flex;align-items:center;gap:var(--spacing-md-1)}.card__user p{line-height:1.3}.card__user-image{border:2px solid var(--color-border-1);border-radius:100%;height:2.5rem}.card__user-status{font-size:.9rem}.card__paragraph{font-weight:500}@media screen and (min-width: 64em){.card--quote::before{content:"";position:absolute;right:0;width:8rem;height:7.846rem;margin:var(--spacing-lg-2);background-image:url(../../images/bg-pattern-quotation.svg);background-size:contain}}.card--purple,.card--purple--quote{background-color:var(--color-primary-3)}.card--purple .card__user-name,.card--purple--quote .card__user-name,.card--purple .card__title,.card--purple--quote .card__title{color:var(--color-text-0)}.card--purple .card__user-status,.card--purple--quote .card__user-status,.card--purple .card__paragraph,.card--purple--quote .card__paragraph{color:var(--color-primary-1)}.card--purple .card__user-image,.card--purple--quote .card__user-image{border-color:var(--color-primary-2)}@media screen and (min-width: 48em){.card--purple--quote::before{content:"";position:absolute;right:0;width:8rem;height:7.846rem;margin:var(--spacing-lg-2);background-image:url(../../images/bg-pattern-quotation.svg);background-size:contain}}.card--grey,.card--grey--quote{background-color:var(--color-surface-2)}.card--grey .card__user-name,.card--grey--quote .card__user-name,.card--grey .card__title,.card--grey--quote .card__title{color:var(--color-text-0)}.card--grey .card__user-status,.card--grey--quote .card__user-status,.card--grey .card__paragraph,.card--grey--quote .card__paragraph{color:var(--color-text-3)}@media screen and (min-width: 48em){.card--grey--quote::before{content:"";position:absolute;right:0;width:8rem;height:7.846rem;margin:var(--spacing-lg-2);background-image:url(../../images/bg-pattern-quotation.svg);background-size:contain}}.card--dark-blue,.card--dark-blue--quote{background-color:var(--color-surface-3)}.card--dark-blue .card__user-name,.card--dark-blue--quote .card__user-name,.card--dark-blue .card__title,.card--dark-blue--quote .card__title{color:var(--color-text-3)}.card--dark-blue .card__user-status,.card--dark-blue--quote .card__user-status,.card--dark-blue .card__paragraph,.card--dark-blue--quote .card__paragraph{color:var(--color-text-3)}.card--dark-blue .card__user-image,.card--dark-blue--quote .card__user-image{border-color:var(--color-primary-2)}@media screen and (min-width: 48em){.card--dark-blue--quote::before{content:"";position:absolute;right:0;width:8rem;height:7.846rem;margin:var(--spacing-lg-2);background-image:url(../../images/bg-pattern-quotation.svg);background-size:contain}}.card--charcoal-blue,.card--charcoal-blue--quote{background-color:var(--color-surface-4)}.card--charcoal-blue .card__user-name,.card--charcoal-blue--quote .card__user-name,.card--charcoal-blue .card__title,.card--charcoal-blue--quote .card__title{color:var(--color-text-4)}.card--charcoal-blue .card__user-status,.card--charcoal-blue--quote .card__user-status,.card--charcoal-blue .card__paragraph,.card--charcoal-blue--quote .card__paragraph{color:var(--color-text-5)}.card--charcoal-blue .card__user-image,.card--charcoal-blue--quote .card__user-image{border-color:var(--color-primary-2)}@media screen and (min-width: 48em){.card--charcoal-blue--quote::before{content:"";position:absolute;right:0;width:8rem;height:7.846rem;margin:var(--spacing-lg-2);background-image:url(../../images/bg-pattern-quotation.svg);background-size:contain}}@media screen and (min-width: 48em){.card-section{grid-template-columns:repeat(3, 1fr);grid-template-areas:"card1 card1 card2" "card3 card4 card4" "card5 card5 card5"}[class|=card]{max-width:unset}[class|=card]:nth-child(1){grid-area:card1}[class|=card]:nth-child(2){grid-area:card2}[class|=card]:nth-child(3){grid-area:card3}[class|=card]:nth-child(4){grid-area:card4}[class|=card]:nth-child(5){grid-area:card5}}@media screen and (min-width: 64em){.card-section{grid-template-columns:repeat(4, 1fr);grid-template-areas:"card1 card1 card2 card5" "card3 card4 card4 card5";max-width:91.46rem}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes offset-left-to-origin{from{transform:translateX(-10%)}to{transform:translateX(0%)}}/*# sourceMappingURL=style.css.map */