.content{ padding-top: 80px; padding-bottom: 100px; background: #F4F6F7; .title{ font-weight: bold; font-size: 50px; color: #222325; text-align: center; margin-top: 0px; margin-bottom: 80px; } .containerInfo{ background: #fff; margin-top: 30px; padding: 50px 60px; .infoTitle{ font-weight: bold; font-size: 32px; color: #222326; margin-top: 0; margin-bottom: 10px; } .infoList{ // display: flex; // flex-wrap: wrap; .listBox{ // width: 33.33%; margin-top: 20px; .name{ font-weight: bold; font-size: 18px; color: #333436; line-height: 36px; margin-top: 0; margin-bottom: 5px; } .linkList{ display: flex; flex-wrap: wrap; } .link{ width: 25%; display: block; font-weight: 300; font-size: 14px; color: #515356; line-height: 38px; } } } } } @media (max-width: 991px) { .content { .containerInfo{ .infoList { .listBox { .link{ width: 33.333%; } } } } } } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 50px; .title{ margin-bottom: 40px; font-size: 32px; } .containerInfo{ padding: 25px 20px; margin-top: 15px; .infoTitle{ font-size: 22px; margin-bottom: 5px; } .infoList{ .listBox{ width: 100%; margin-top: 15px; .name{ font-size: 16px; line-height: 32px; } .link{ width: 50%; font-size: 14px; line-height: 34px; } } } } } } @media (max-width: 378px) { .content { .containerInfo{ .infoList { .listBox { .link{ width: 100%; } } } } } }