mjchemi/scss/media.scss

@media(max-width: 1200px){
  main{
    .section--container{
      padding-left: 20px!important;
      padding-right: 20px!important;
      .title--wrap{
        &.big{
          >h2{
            font-size: 36px;
          }
        }
        >h2{
          font-size: 30px;
        }
      }
      .growth--logic--wrap{
        gap: 20px;
        .title--box{
          width: calc((100% - 120px) / 3 + 80px);
          h2{
            font-size: 36px;
          }
        }
        .logic--box{
          padding: 40px 35px 40px;
          &.special{
            width: calc((100% - 120px) / 3 + 80px);
          }
        }
      }
      .best--service--wrap{
        gap: 20px;
        .service--box{
          width: calc((100% - 40px) / 3);
          padding: 20px 25px 40px;
          h3{
            font-size: 18px;
            margin-top: 30px;
            margin-bottom: 20px;
          }
        }
      }
      .now--box--wrap{
        .box--top{
          .box{
            >p{
              font-size: 16px;
            }
          }
        }
        .box--bot{
          gap: 20px;
        }
      }
    }
  }
}

@media(max-width: 768px){
  .mb--80{
    margin-bottom: 40px!important;
  }
  br{
    &.web{
      display: none;
    }
  }
  main{
    .section--container{
      &.p--120{
        padding: 60px 0;
      }
      &.p--100{
        padding: 60px 0;
      }
      .title--wrap{
        &.big{
          >h2{
            font-size: 30px;
            margin-bottom: 30px;
          }
          >p{
            font-size: 15px;
          }
        }
      }
      .best--service--wrap{
        flex-direction: column;
        .service--box{
          width: 100%;
          h3{
            br{
              display: none;
            }
          }
        }
      }
      .now--box--wrap{
        .box--bot{
          flex-direction: column;
          .box{
            width: 100%;
          }
        }
      }
    }
    .faq--wrapper{
      .inner--contents{
        .faq--list--wrap{
          ul{
            li{
              .faq--item--title{
                >p{
                  font-size: 15px;
                }
              }
              .faq--item--content{
                >p{
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width: 500px){
  main{
    .section--container{
      .now--box--wrap{
        .box--top{
          flex-wrap: wrap;
          gap: 20px;
          margin-bottom: 50px;
          .box{
            width: 100%;
            flex-direction: row;
            gap: 20px;
            .box--img{
              width: 80px;
              min-width: 80px;
              img{
                width: 100%;
              }
            }
            >p{
              width: calc(100% - 120px);
              text-align: left;
            }
          }
        }
      }
    }
  }
}