@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "League Spartan";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/league-spartan-v14-latin-regular.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url("./assets/fonts/league-spartan-v14-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "League Spartan";
    font-style: normal;
    font-weight: 500;
    src: url("./assets/fonts/league-spartan-v14-latin-500.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url("./assets/fonts/league-spartan-v14-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "League Spartan";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/league-spartan-v14-latin-700.woff2") format("woff2"),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
            url("./assets/fonts/league-spartan-v14-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
:root {
    --color-white: hsl(0, 0%, 100%);
    --color-pink-500: hsl(333, 80%, 67%);
    --color-magenta-500: hsl(300, 43%, 22%);
    --color-magenta-200: hsl(303, 10%, 53%);
    --color-magenta-100: hsl(300, 24%, 96%);

    --shadow-sm-inset: inset 0 0 32px -24px hsla(300, 43%, 22%, 0.25);
    --shadow-md: -12px 12px 32px -8px hsla(300, 43%, 22%, 0.5);

    --font-primary: "League Spartan", sans-serif;
    --font-normal: 400;
    --font-medium: 500;
    --font-bold: 700;

    --text-base: 1rem;

    --leading-none: 1;

    --rounded-full: 9999px;
    --rounded-sm: 0.375rem;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}
body {
    line-height: var(--leading-none);
    -webkit-font-smoothing: antialiased;
}
ul {
    padding-left: 0;
    list-style: none;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
blockquote {
    quotes: "“" "”";
}
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

.sr-only {
    position: absolute;
    width: 0.1rem;
    height: 0.1rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

main {
    position: relative;
    padding-top: 5.125rem;
    padding-bottom: 6.1875rem;
    min-height: 100vh;
    font-family: var(--font-primary);
    font-size: var(--text-base);
}
main::before,
main::after {
    position: absolute;
    pointer-events: none;
}
main::before {
    content: url("./assets/images/bg-pattern-top-mobile.svg");
    top: 0;
    left: 0;
}
main::after {
    content: url("./assets/images/bg-pattern-bottom-mobile.svg");
    bottom: 0;
    right: 0;
}
.main__wrapper {
    width: min(100vw - 3rem, 32rem);
    margin: 0 auto;
}
.intro {
    z-index: 999;
    position: relative;
    text-align: center;
    margin-bottom: 2.4375rem;
}
.intro__title {
    color: var(--color-magenta-500);
    font-size: 2.5rem;
    line-height: 2rem;
    margin-bottom: 1.4375rem;
    letter-spacing: -0.035em;
}
.intro__description {
    font-size: 1.1875rem;
    line-height: 1.5625rem;
    letter-spacing: -0.034em;
    font-weight: var(--font-medium);
    color: var(--color-magenta-200);
}
.rating__wrapper {
    z-index: 999;
    position: relative;
    text-align: center;
    margin-bottom: 3.0625rem;
    letter-spacing: 0.03em;
    color: var(--color-magenta-500);
}
.rating__list > * + * {
    margin-top: 1rem;
}
.rating__item {
    padding: 1rem 1rem 0.9375rem 1rem;
    border-radius: var(--rounded-sm);
    background-color: var(--color-magenta-100);
    box-shadow: var(--shadow-sm-inset);
}
.rating__stars {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    margin-bottom: 0.9375rem;
}
.rating__stars > * + * {
    margin-left: 0.5rem;
}
.testimonial__wrapper {
    z-index: 999;
    position: relative;
}
.testimonial__list {
    color: var(--color-magenta-100);
}
.testimonial__list > * + * {
    margin-top: 1rem;
}
.testimonial__item {
    padding: 2.5rem 2rem 1.9375rem 2rem;
    background-color: var(--color-magenta-500);
    border-radius: var(--rounded-sm);
    box-shadow: var(--shadow-md);
}
.testimonial-author__wrapper {
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    margin-bottom: 1.6875rem;
}
.testimonial-author__avatar {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1.4375rem;
    border-radius: var(--rounded-full);
}
.testimonial-author__name-wrapper {
    margin-top: 0.125rem;
}
.testimonial-author__name {
    margin-bottom: 0.25rem;
}
.testimonial-author__status {
    font-weight: var(--font-normal);
    color: var(--color-pink-500);
}
.testimonial__content {
    line-height: 1.375rem;
    letter-spacing: 0.016em;
}

@media screen and (min-width: 64em) {
    main {
        padding-top: 7.375rem;
        padding-bottom: 6.25rem;
    }
    main::before {
        content: url("./assets/images/bg-pattern-top-desktop.svg");
    }
    main::after {
        content: url("./assets/images/bg-pattern-bottom-desktop.svg");
    }
    .main__wrapper {
        width: min(100vw - 3rem, 69.375rem);
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .intro {
        text-align: start;
        margin: 0;
        padding-bottom: 4.4375rem;
    }
    .intro__title {
        font-size: 3.5rem;
        line-height: 3rem;
        max-width: 12ch;
        margin-bottom: 1.625rem;
    }
    .intro__description {
        max-width: 40ch;
    }
    .rating__list {
        display: flex;
        flex-direction: column;
        align-items: end;
        padding-top: 1.6875rem;
    }
    .rating__item {
        width: 27.75rem;
        padding: 1.25rem 2rem 1.25rem 2rem;
        display: flex;
    }
    .rating__item:nth-child(1) {
        margin-right: 6rem;
    }
    .rating__item:nth-child(2) {
        margin-right: 3rem;
    }
    .rating__item:nth-child(3) {
        padding-left: 1.9375rem;
    }
    .rating__stars {
        margin: 0 2rem 0 0;
    }
    .testimonial__wrapper {
        grid-column: span 2;
    }
    .testimonial__list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
        gap: 1.875rem;
    }
    .testimonial__item {
        padding-bottom: 2.4375rem;
        padding-right: 1.875rem;
    }
    .testimonial__item:nth-child(3) {
        margin-top: 2rem;
    }
}