@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap");

:root {
    --teal-400: hsl(181, 37%, 58%);
    --teal-500: hsl(179, 62%, 43%);
    --green-400: hsl(71, 73%, 54%);

    --teal-100: hsl(204, 43%, 93%);
    --gray-500: hsl(218, 22%, 67%);
}

body {
    font-family: Karla, sans-serif;
    font-weight: 400;
    background: var(--teal-100);
    color: var(--gray-500);
    /* min-height: 100dvh; */
}

.card {
    background: white;
    width: min(100%, 311px);
    min-height: 724px;
    margin: 72px auto;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);

    > * {
        padding: 25px 24px;
    }
}

.cta__title {
    font-size: 20px;
    color: var(--teal-500);
    letter-spacing: -0.2px;
}

.cta__promise {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.15px;
    color: var(--green-400);
    margin-block-start: 21px;
    line-height: 1.3;
    text-wrap: unset;
}

.cta__intro {
    font-size: 14px;
    letter-spacing: -0.15px;
    line-height: 1.85;
    margin-block: 17px 6px;
}

.cost {
    background: var(--teal-500);
    color: white;
}

.cost__title {
    font-size: 17px;
    letter-spacing: 0.25px;
    line-height: 1;
    margin-block-start: 1px;
}

.cost__details {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-block-start: 14px;
}

.cost__amount {
    font-size: 33px;
}

.cost__time {
    color: white;
    opacity: 0.5;
}

.cost__intro {
    letter-spacing: -0.2px;
    color: white;
    opacity: 0.9;
}

.cost__btn {
    width: 100%;
    border-radius: 5px;
    border: transparent;
    background: var(--green-400);
    color: var(--teal-100);
    margin-block-start: 26px;
    padding-block: 12px;
    cursor: pointer;

    &:is(:hover, :focus) {
        opacity: 0.8;
    }

    &:active {
        transform: translateY(5px);
    }
}



.why {
    background: var(--teal-400);
    color: white;
}

.why__title {
    font-size: 18px;
    line-height: 1;
}

.why__reasons {
    font-size: 14px;
    opacity: 0.5;
    list-style: none;
    padding-left: 0;
    margin-block-start: 20px;
    line-height: 1.43;
}

@media (width >= 600px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "top top"
            "left right";
        width: min(100%, 636px);
        min-height: unset;
        margin-block-start: 164px;

        > * {
            padding: 36px 40px;
        }
    }

    .cta {
        grid-area: top;
        min-height: 216px;
    }

    .cost {
        grid-area: left;
        min-height: 259px;
    }

    .why {
        grid-area: right;
        min-height: 259px;
    }

    .cta__title {
        font-size: 24px;
    }

    .cta__promise {
        margin-block-start: 20px;
        font-size: 18px;
        letter-spacing: -0.2px;
    }

    .cta__intro {
        font-size: 16px;
        margin-block: 9px 0px;
        line-height: 1.65;        
    }

    .cost__title {
        margin-block-start: 6px;
    }

    .why__title {
        margin-block-start: 6px;
    }
}