:root {
    --body-font-family: "Work Sans", sans-serif;
    /* 400, 600, 700 bse 16px */
    --body-bg-color: hsl(275, 100%, 97%);
    --body-text-color: hsl(292, 16%, 49%);
    --article-bg-color: hsl(0, 0%, 100%);
    --heading-color: hsl(292, 42%, 14%);
    --hover-color: hsl(281, 83%, 54%);
    --spacing-100: 0.8rem;
    --spacing-150: 1.6rem;
    --spacing-300: 2.4rem;
}

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

html {
    font-size: 62.5%;
    height: 100%;
    container-type: size;
}

body {
    min-height: 100%;
    font-family: var(--body-font-family);
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem);
    /* 14px */
    line-height: 1.5;
    background: var(--body-bg-color) url(../images/background-pattern-mobile.svg) no-repeat center top fixed;
    color: var(--body-text-color);
    font-weight: 400;
    padding-inline: var(--spacing-300);
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding-block-start: 4.2rem;
}

h2,
h3 {
    color: var(--heading-color);
}

h2 {
    font-size: clamp(3.2rem, 2rem + 3vw, 5.6rem);
    /* 32px */
    font-weight: 700;
}

h3 {
    font-size: clamp(1.6rem, 1.4rem + 0.5vw, 1.8rem);
    /* 16px */
    font-weight: 600;
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    border: none;
    background: none;
    border-radius: 0;
}

.faq-accordion {
    max-width: 60rem;
    margin-block-end: var(--spacing-300);
    background-color: var(--article-bg-color);
    border-radius: var(--spacing-100);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    padding: clamp(var(--spacing-300), 1.8rem + 1.55vw, 4rem);
}

.faq-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-300);
}

.faq-header img {
    width: 2.4rem;
    height: 2.4rem;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    padding-block-end: var(--spacing-300);
    border-bottom: 1px solid var(--body-bg-color);
}

.faq-item:last-child {
    border-bottom: none;
    padding: 0;
}


.question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    gap: var(--spacing-150);
}

.question-header:hover,
.question-header:focus {
    color: var(--hover-color);
}

.hidden {
    display: none;
}

.attribution {
    font-size: 11px;
    text-align: center;
    padding-block-end: var(--spacing-150);
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@container (width > 37.5rem) {
    body {
        background: var(--body-bg-color) url(../images/background-pattern-desktop.svg) repeat-x center top fixed;
    }
}