.local-link1 { margin: 40px 0; } .local-link1_inner { display: -webkit-flex; display: flex; margin-bottom: -20px; margin-left: -20px; } .local-link1_item { width: calc((100% - 20px * 4) / 4); margin-left: 20px; margin-bottom: 20px; } .local-link1_item_img img { max-width: 100%; } .local-link1_item_text { margin: 20px 0 0; } .local-link1_item_heading { margin: 10px 0 0; font-size: 16px; } .local-link1_item_heading a { padding-left: 1em; text-indent: -1em; display: inline-block; } .local-link1_item_heading a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 8px; } .local-link1_item_paragraph { margin: 10px 0 0; font-size: 12px; } @media screen and (max-width: 640px) { .local-link1_inner { display: block; margin: 0; } .local-link1_item { width: 100%; margin: 0 0 20px; display: -webkit-flex; display: flex; } .local-link1_item_img { width: 33%; box-sizing: border-box; padding-right: 10px; } .local-link1_item_text { width: 66%; margin: 0; box-sizing: border-box; padding-left: 10px; } .local-link1_item_heading { margin: 0; } .local-link1_item_paragraph { margin: 10px 0 0; } } .local-link2 { margin: 40px 0; } .local-link2_inner { display: -webkit-flex; display: flex; margin-bottom: -20px; margin-left: -20px; } .local-link2_item { width: calc((100% - 20px * 3) / 3); margin-left: 20px; margin-bottom: 20px; display: -webkit-flex; display: flex; } .local-link2_item_img { box-sizing: border-box; padding-right: 20px; width: 178px; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .local-link2_item_img img { max-width: 100%; } .local-link2_item_text { -webkit-flex: 1 1 auto; flex: 1 1 auto; } .local-link2_item_heading { font-size: 16px; } .local-link2_item_heading a { padding-left: 1em; text-indent: -1em; display: inline-block; } .local-link2_item_heading a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 8px; } .local-link2_item_paragraph { margin: 10px 0 0; font-size: 12px; } @media screen and (max-width: 640px) { .local-link2_inner { display: block; margin: 0; } .local-link2_item { width: 100%; margin: 0 0 20px; } .local-link2_item_img { width: 33%; padding-right: 10px; } .local-link2_item_text { width: 66%; margin: 0; box-sizing: border-box; padding-left: 10px; } .local-link2_item_heading { margin: 0; } .local-link2_item_paragraph { margin: 10px 0 0; } } @media print { .local-link2_item { width: 337px; } }