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

:root{
    --color1: hsl(212, 45%, 89%);
    --color2:  hsl(0, 0%, 100%);
    --colorh: hsl(218, 44%, 22%);
    --colorp: hsl(216, 15%, 48%);
    --colora: hsl(228, 45%, 44%);
    --shadow: rgba(0, 0, 0, 0.1);
}

body {
    width: calc(375/16 * 1rem);
    max-width: 100vw;
    margin: 0 auto;
    background-color: var(--color1) ;
    padding-top: calc(40/16 * 1rem);
    font-family: 'Outfit', sans-serif;
}

h1 {
    text-align: center;
    font-weight: bold;
    color: var(--colorh);
}

.card {
    background-color: var(--color2);
    width: 30vh;
    height: auto;
    margin: 4.5rem auto;
    border-radius: 5%;
    padding: 4%;
    box-shadow:  0.2rem 0.2rem 0.6rem var(--shadow);
}


img {
    width: 100%;
    border-radius: 2%;
}

h2, p {
    width: 100%;
    text-align: center;
}

h2 {
    font-weight: 700;
    color: var(--colorh) ;
}

p {
    font-weight: 400;
    color: var(--colorp);
}

.attribution {
    font-size: 0.7rem; text-align: center; 
}

.attribution a { color: var(--colora) ; }

.card:hover {
    transform: scale(1.08);
}