.section-howto {
    width: 80%;
    margin: auto;
}

.howto-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10%;
}

.howto-container img {
    width: 44%;
}

.howto-container-text {
    width: 50%;
    font-size: 1.8rem;
    color: #333;
}

.howto-title {
    font-size: 2rem;
    color: #fca3cc;
    padding: 0 0 2% 4%;
    border-bottom: 1px solid #fca3cc;
    margin: 0 auto 4%;
}

.section-basicplay {
    width: 80%;
    margin: 10% auto;
}

.basicplay-title {
    width: 100%;
    margin: 0 auto 4%;
    font-size: 2rem;
    padding: 2% 0 1% 4%;
    background-image: linear-gradient(to right, #e4c9a6, #fca3cc, #fca3cc);
    color: #fff;
    text-shadow: 2px 2px 4px #8a8989;
    font-family: sans-serif; 
}

.basicplay-container {
    width: 100%;
    text-align: center;
}

.basicplay-container img {
    width: 80%;
    margin-bottom: 4%;
}

.basicplay-container-text {
    width: 90%;
    text-align: left;
    margin: auto;
    color: #333;
    font-size: 1.6rem;
}

@media screen and (max-width:600px) {
    .section-howto {
        width: 96%;
        margin-bottom: 24%;
     }
     
     .howto-container {
         display: block;
         text-align: center;
     }
     
     .howto-container img {
         width: 100%;
     }
     
     .howto-container-text {
         width: 100%;
         text-align: left;
         font-size: 1.7rem;
     }
     
     .section-basicplay {
         width: 96%;
         margin: 20% auto;
     }
     
     .basicplay-title {
         width: 100%;
         padding: 4% 0 2% 4%;
         margin: 5% auto;
     }
     
     .basicplay-container {
         padding: 0;
     }
     
     .basicplay-container img {
         width: 100%;
         margin-bottom: 4%;
     }
         
     .basicplay-container-text {
         width: 100%;
     }
}