body {
    margin: 0;
    font-family: 'Red Hat Display', sans-serif;
}

.bg-image {
background-image: url('pattern-background-desktop.svg');
min-height: 100vh;
background-repeat: no-repeat;
background-color: hsl(225, 100%, 94%);
padding-top: 6.5rem;
padding-bottom: 6.5rem;
}

main {
    display: flex;
    flex-basis: flex;
    justify-content: center;
    align-items: center;
    min-height:  100vh;
    }

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 26em;
    padding: 0;
    border-radius: 1.25em;
    padding-bottom: 3em;
}

.card__img {
    width: 100%;
    border-radius: 1.25em 1.25em 0% 0%;
    max-height: 12.4rem;
}

.card__h1 {
    text-align: center;
    font-weight: 900;    
    font-size: 1.54em;
    color: hsl(223, 47%, 23%);
    padding-top: 1.5em;
    margin-bottom: 0;
    margin-top: 0;
}

.card__p {
    text-align: center;
    font-weight: 500;    
    font-size: 1rem;
    color:hsl(224, 23%, 55%);
    line-height: 1.4em;
    margin-bottom: 1.3em;
    }
    
span {letter-spacing: 0.01em;}

.card__info {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    background-color: hsl(225, 100%, 98%);
    width: 80%;
    margin-bottom: 2em;
    border-radius: 0.75em;
    padding-top: 1em;
    padding-bottom: 1em;
    }

.info--icon {
grid-column: 1;
grid-row: 1/3;
align-self: center;
justify-self: center;
grid-area: span;
width: 55%;
}

.info__text {line-height: 50%;}

.info--h2 {
align-self: baseline;  
grid-column: 2/3;
font-weight: 900;
font-size: 0.95em;
color: hsl(223, 47%, 23%);
}

.info--price {
grid-column: 2/3;
color: hsl(224, 23%, 55%);
}

.info--change {
grid-column: 3/4;
grid-row: 1/3;
justify-self: center;
align-self: center;
color: hsl(245, 75%, 52%);
font-size: 0.85em;
font-weight:900;
text-decoration: underline;
letter-spacing: -0.04em;
}

.button--proceed {
    display: flex;
    width: 80%;
    background-color: hsl(245, 75%, 52%);
    color: white;
    justify-content: center;
    border-radius: 0.75em;
    padding: 1em;
    margin-bottom: 2em;
    font-weight: 700;
    font-size: 0.90em;
    box-shadow: -0.25em 1.5em 1em hsl(250, 100%, 95%);
    border-width: 0px;
}

.button--cancel {
    display: flex;
    justify-content: center;
    background-color: transparent;
    border: 0;
    color: hsl(224, 23%, 55%);
    font-weight: 900;
    font-size: small;
}

.info--change:hover {
    cursor: pointer;
    text-decoration: none;
}

.button--proceed:hover {
    cursor: pointer;
    background-color: hsl(245, 50%, 61%);
}

.button--cancel:hover {
    cursor: pointer;
    color: hsl(223, 47%, 23%);
    font-weight: 900;
}