@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


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

img{
    display:block;
    width:100%;
    height: auto;
}
:root{
    --WHITE:hsl(0, 0%, 100%);
    --BG-COLOR:hsl(212, 45%, 89%);
    --TITLE-COLOR:hsl(218, 44%, 22%);
    --TEXT-COLOR:hsl(216, 15%, 48%);
}

.offscreen{
    position: absolute;
    left:-100000px;
}
body{
    min-height: 100vh;
    font-size: clamp(1.1rem, 20px, 20px);
    font-family: Outfit, sans-serif;
    display:grid;
    place-content: center;
    background-color: var(--BG-COLOR);
}

.text-container{
    display:flex;
    flex-flow:column wrap;
    background-color: var(--WHITE);
    border-radius: 5%;
    justify-content: space-evenly;
    align-items: center;
    max-width: 400px;
    height: 600px;
}

.text-container__figure{
    width:85%;
    border-radius: inherit;
}

.text-container__qr{
    width: 100%;
    height: auto;

    border-radius: inherit;
}

.text-container__title{
    padding:0 1.5rem 0;
    font-weight: 700;
    color:var(--TITLE-COLOR);
    text-align: center;
}

.text-container__text{
    font-size:clamp(0.8rem, 15px, 15px);
    padding:0 1.5rem 0;
    font-weight: 400;
    color:var(--TEXT-COLOR);
    text-align: center;
}