@charset "UTF-8";

@media screen and (min-width: 768.01px) and (max-width: 992px) {
    
    section {
        max-width: 550px;
        height: 450px;
        font-size: clamp(13px, 14px);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 
        "join join"
        "subs why"
        ;
    }

    div#join{
        padding: 20px;
    }

    div#join > h2 {
        margin-bottom: 10px;
    }

    div#join > p {
        line-height: 25px;
        text-align: left;
    }

    div#sign {
        border-radius: 0px 0px 0px 5px;
    }

    div#sign > h2 {
        margin-bottom: 15px;
    }

    div#sign > a {
        height: 50px;
        margin-top: 20px;
    }

    div#why {
        border-radius: 0px 0px 5px 0px;
    }
}

@media screen and (min-width: 992.01px){
    section {
        max-width: 800px;
        height: 500px;
        font-size: 15px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 
        "join join"
        "subs why"
        ;
    }

    div#join{
        padding: 30px;
        margin: -10px 0px;
    }

    div#join > h2 {
        margin-bottom: 10px;
    }

    div#join > p {
        line-height: 25px;
        text-align: left;
    }

    div#sign {
        border-radius: 0px 0px 0px 5px;
    }

    div#sign > h2, h3, p {
        line-height: 20px;
    }

    div#sign > h2 {
        margin-bottom: 10px;
    }

    div#sign > p#value {
        line-height: 35px;
        margin-bottom: 5px;
    }

    div#sign > a {
        height: 50px;
    }

    div#why {
        padding-left: 35px;
    }

    div#why, h2 {
        padding-top: 20px;
    }

}