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

:root {
    --pr-Cyan: #2ab2af;
    --pr-Cyan-light: #2ab2b062;
    --pr-Bright-Yellow: #c0df34;
    --ne-Light-Gray: #e5eff5;
    --ne-Grayish-Blue: #98a6bd;
}

/* Reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Karla',sans-serif;
}

/* Main style */
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ne-Light-Gray);
}

#container {
    width: 500px;
    height: 400px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1.2fr;
    grid-template-areas: 
    "join         join"
    "subscription why"
    ;
}

/* Grid */
#join {
    padding: 35px 30px 30px 30px;
    grid-area: join;
    border-radius: 10px 10px 0 0;
    background-color: white;
}

#subscription {
    padding: 30px 15px 30px 30px;
    grid-area: subscription;
    border-radius: 0 0 0 10px;
    background-color: var(--pr-Cyan);
    color: white;
}

#why_us {
    padding: 30px 30px 30px 15px;
    grid-area: why;
    border-radius: 0 0 10px 0;
    background-color: var(--pr-Cyan-light);
    color: white;
}

/* Content Join*/
#join h2 {
    font-size: 1.4rem;
    color: var(--pr-Cyan);
    padding-bottom: 10px;
}

#join h3 {
    font-size: 1.05rem;
    color: var(--pr-Bright-Yellow);
    padding-bottom: 10px;
}

#join p {
    font-size: .8rem;
    color: var(--ne-Grayish-Blue);
    line-height: 1.5rem;
}

/* Content subscription */
#subscription h3 {
    font-size: 1rem;
    padding-bottom: 15px;
}

.price {
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.562);
    padding-bottom: 15px;
}

span {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.full {
    font-size: .85rem;
    padding-bottom: 25px;
}

button {
    width: 100%;
    height: 35px;
    color: white;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    background-color: var(--pr-Bright-Yellow);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.37);
}

/* Content Why */
#why_us h3 {
    font-size: 1rem;
    padding-bottom: 15px;
}

#why_us p {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.3rem;
}

@media screen and (max-width: 375px) {
    #container {
        width: 340px;
        height: 400px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr .8fr 1fr;
        grid-template-areas: 
        "join"
        "subscription"
        "why";
    }

    #join {
        padding: 25px 20px 20px 25px; 
    }

    #subscription {
        padding: 25px 20px 20px 30px;
        border-radius: 0px;
    }
    #why_us {
        padding-right: 50px;
        padding-bottom: 20px;
        border-radius: 0 0 10px 10px;
    }
}