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

:root {
    --white: hsl(0, 0%, 100%);
    --slate-300: hsl(212, 45%, 89%);
    --slate-500: hsl(216, 15%, 48%);
    --slate-900: hsl(218, 44%, 22%);
}

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

body {
    min-height: 100vh;
    background-color: var(--slate-300);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: "Outfit", sans-serif;
}

.container {
    width: 18.125rem;
    /* base para telas pequenas */
    margin-bottom: 1.25rem;
    padding: 0.9375rem;
    background-color: var(--white);
    border-radius: 1.25rem;
    box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.137);
}

.image {
    border-radius: 1.25rem;
    width: 100%;
}

.text {
    margin: 0.3125rem 0.1875rem;
    text-align: center;
}

h1 {
    margin-bottom: 1.25rem;
    color: var(--slate-900);
    font-size: 1.3rem;
}

p {
    font-size: 0.93rem;
    color: var(--slate-500);
}

.attribution {
    text-align: center;
}

.network {
    font-size: 0.7rem;
}

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

/* Tablet pequeno em diante (a partir de 374px) */
@media (min-width: 23.375em) {
    .container {
        width: 20.1875rem;
        margin-bottom: 1.25rem;
        padding: 0.9375rem;
    }

    .text {
        margin: 1.25rem 0.1875rem;
    }

    h1 {
        font-size: 1.58rem;
    }

    p {
        font-size: 1rem;
    }

    .network {
        font-size: 0.8rem;
    }
}

/* Tablet médio em diante (a partir de 428px) */
@media (min-width: 26.75em) {
    .container {
        width: 26.375rem;
        padding: 1.25rem;
        margin-bottom: 3.75rem;
    }

    .text {
        margin: 1.5625rem;
    }

    h1 {
        font-size: 1.8rem;
    }

    p {
        font-size: 1.2rem;
    }

    .network {
        font-size: 1rem;
    }
}

/* Telas maiores (a partir de 884px) */
@media (min-width: 55.25em) {
    .container {
        width: 26.188rem;
    }
}