:root {
  --main-bg-color: hsl(212, 45%, 89%);
  --main-white: #FFFFFF;
  --main-black: #000000;
  --main-shadow: #AAAAAA;
  --blue-gray: hsl(220, 15%, 55%);
}

h3 {
    margin: 0;
}

p {
    margin: 0;
    font-size: 15px;
    color: var(--blue-gray);
}

body {
    font-family: 'Outfit', sans-serif;
    height: 100vh;
    margin: 0;
    background-color: var(--main-bg-color);

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.card {
    width: 18rem;
    height: 27rem;
    background-color: var(--main-white);

    border-radius: 10px;

    box-shadow: 5px 5px 10px var(--main-shadow);

    display: grid;
    grid-template-rows: 65% auto auto;
    align-items: start;
    justify-items: center;
}

.title {
    align-self: center;
    text-align: center;
    padding: 0rem 2rem;
}

.subtitle {
    align-self: flex-start;
    text-align: center;
    padding: 0rem 1rem;
}

.card .image-wrapper {
    width: 88%;
    height: 88%;
    margin: auto;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}