#link-list.support { width: 95%; font-size: 1.25rem; margin: auto; -webkit-columns: 2; -moz-columns: 2; columns: 2; } .link-branch { -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; width: 100%; aspect-ratio: 3/2; background-color: var(--load-1); padding: 20px; border-radius: 15px; -webkit-filter: drop-shadow(black 5px 5px 5px); filter: drop-shadow(black 5px 5px 5px); margin-bottom: 40px; } .link-branch h2 { display: inline; margin: 5px; margin-left: 40px; padding: 2px 10px; color: var(--max-1); background-color: var(--title-background); } .link-branch ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; list-style-type: none; margin: 5px auto; } .link-branch ul h3 { width: 200px; text-align: center; margin: auto; margin-top: 40px; margin-bottom: 0; background-color: var(--accent-2); color: var(--background); } .link-branch ul a { margin: 10px auto; width: 100%; } .link-branch ul a li { text-align: center; background-color: var(--text-background); padding: 15px; border-radius: 25px; } .link-branch ul a:hover li { background-color: var(--accent-2); color: var(--background); } #link-list.support .link-branch { background-repeat: no-repeat; background-size: cover; background-position: center; } #link-list.support .link-branch:nth-child(1) { background-image: url(res/img-flg-drctact.jpg); } #link-list.support .link-branch:nth-child(2) { background-image: url(res/img-flg-flstn.jpg); background-position: top; } #link-list.support .link-branch:nth-child(3) { background-image: url(res/img-flg-sdn.jpg); background-position: top; } #link-list.support .link-branch:nth-child(4) { background-image: url(res/img-flg-ethpa.jpg); } #link-list.support .link-branch:nth-child(5) { background-image: url(res/img-flg-cng.jpg); } #link-list.support .link-branch:nth-child(6) { background-image: url(res/img-flg-ngria.jpg); } #link-list.support .link-branch:nth-child(7) { background-image: url(res/img-flg-msk.jpg); } #link-list.support .link-branch:nth-child(8) { background-image: url(res/img-flg-msc.jpg); } @media only screen and (max-width: 850px) { #link-list.support { -webkit-columns: 1; -moz-columns: 1; columns: 1; } }