.region-wrapper{ text-align:center; max-width:960px; margin:80px auto; padding:0 20px; } .region-title{ font-size:42px; font-weight:600; line-height:1.15; margin:0 0 18px; } .region-title span{ display:block; } .region-subtitle{ font-size:18px; color:#777; margin:0 0 50px; } .region-grid{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; } .region-card{ display:block; width:320px; padding:30px 24px 32px; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); text-decoration:none; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease; color:inherit;  } .region-card *{ color:inherit; } .region-card:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(0,0,0,.14); background-color:#f7f9ff; } .region-card:focus-visible{ outline:3px solid rgba(41,98,255,.35); outline-offset:4px; } .region-logo{ display:block; margin:0 auto 18px; max-width:160px;  width:100%; height:auto; } .region-location{ font-size:24px; font-weight:650; margin:0 0 8px; } .region-url{ font-size:16px; color:#555; } .region-card:hover .region-location{ color:#2962ff; } .region-footer{ margin:60px 0 0; color:#999; font-size:15px; } .region-footer a{ color:#2962ff; text-decoration:none; } .region-footer a:hover{ text-decoration:underline; } @media (max-width:768px){ .region-wrapper{ margin:60px auto; } .region-title{ font-size:30px; } .region-subtitle{ font-size:16px; margin-bottom:28px; } .region-grid{ gap:18px; } .region-card{ width:100%; max-width:420px; padding:26px 18px 28px; } .region-logo{ max-width:150px; } .region-location{ font-size:22px; } }