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

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

html{
    font-size: 62.5%;
}

body{
    width: 100vw;
    height: 100vh;
      
}

.main-container{
    width: 100%;
    min-height: 100%;
    background-color: #d5e1ef;
    display: grid;    
    place-content: center;
    justify-items: center;
}

.main-container .card-img{
    width: 22rem;
    height: 22rem;
    grid-column: 2 / 3;
    grid-row: 2 /3;
}

.card-contend{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    
    font-family: "Outfit", sans-serif;
}
.card-contend > h3{
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: #243046;
    text-align: center;
}
.card-contend > p {
    color: hsl(216, 15%, 48%);
    text-align: center;    
    font-weight: 400;
    font-size: 1.2rem;
}
.card-img img{
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
}

.card-container{
    background-color: white;    
    border-radius:1.5rem;    
    display: grid;
    grid-template-columns: 1.5rem 1fr 1.5rem;    
    grid-template-rows: 1.5rem 2fr 1fr 1.5rem;
    height: 40rem;
    width: 25rem;
    justify-items: center;
}