body {
    margin: 0;
    padding: 0;
}

.card__container-main {
    background-image: url("./images/pattern-background-mobile.svg");
    background: hsl(225, 100%, 94%);
    background-repeat: no-repeat;
    font-family: 'Red Hat Display', sans-serif;
    display: flex;
    justify-content: center;
    text-align: center;
}
.card__container {
    margin: 87px 0px;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

}
.card__heading {
    background-color: hsl(225, 100%, 94%);
    border:55px;
    height: 220px;
}
.card__heading-imagen {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 0px;
    height: 100%;
}
.card__body {
    margin: 0px;
    max-width: 450px;
    padding: 30px 0px;
}
.card__body-title {
    font-size: 25px;
    margin: 0px;
}
.card__body-subtitle {
    font-size: 16px;
    font-weight: lighter;
    padding: 4px 50px;
    color: hsl(224, 23%, 55%);
}
.card__body-grid{
    background-color: hsl(225, 100%, 98%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: 40px;
    margin-right: 40px;
    border-radius: 10px;
}
.card__body-grid-icon {
    align-self: center;
}
.card__body-grid-description {
    align-self: center;
}
.card__body-grid-plan {
    font-weight: 600;
    margin-top: 21px;
    margin-bottom: 5px;
}
.card__body-grid-price {
    font-weight: 100;
    margin-top: 5px;
    margin-bottom: 21px;
    color: hsl(224, 23%, 55%);
}
.card__body-grid-link {    
    align-self: center;
}
a:hover {
    color: hsl(245, 75%, 52%);
    text-decoration: none;
}
.card__body-button {
    background-color: hsl(245, 75%, 52%);
    color: hsl(225, 100%, 98%);
    margin-top: 25px;
    width: 365px;
    height: 45px;
    border-bottom: 5px;
    border-radius: 10px;
    box-shadow: 1px 10px 10px hsl(225, 100%, 94%);
}
input:hover {
    background-color:  hsl(261, 34%, 52%);
    text-decoration: none;
    cursor: pointer;
}
.card__body-cancel-order {
    font-size: 10px;
    margin-top: 32px;
}
.card__body-cancel-order-link {
    color: hsl(224, 23%, 55%);
    text-decoration: none;
}
.card__body-cancel-order-link:hover {
    font-weight: 600;
    color: black;
    cursor: pointer;
}

@media (min-width: 376px) {
    .card__container-main {
        background-image: url("./images/pattern-background-desktop.svg");
    }
}