.candidate { margin-bottom: var(--space-20); } .candidate__photo { margin-top: var(--space-30); margin-bottom: var(--space-8); margin-left: auto; margin-right: auto; width: 61.8%; box-shadow: 2vw 2vw 0 0 var(--green); } .candidate__name { font-size: 1.5rem; text-align: center; } .candidate__name:first-child { margin-top: var(--space-30); } .candidate__social-media { justify-content: center; margin: 0; margin-bottom: var(--space-2); padding: 0; list-style: none; } .candidate__social-network { margin-right: var(--space-2); width: 24px; transition: transform 0.2s; } @media (min-width: 1000px) { .candidate__social-network { width: 32px; } } .candidate__social-network:hover, .candidate__social-network:focus { transform: scale(1.2); } .candidate__details { margin-top: var(--space-5); margin-bottom: var(--space-10); } .candidate__details dd { font-family: var(--text); font-weight: var(--text-regular); } .candidate__details dd:nth-last-child(2n) { margin-bottom: 0; } .candidate__details dd li p { margin-bottom: var(--space-1); } @media (min-width: 501px) { .candidate h2 { font-size: 1.5rem; } } @media (min-width: 600px) { .candidate__details { display: block; margin-left: auto; margin-right: auto; } .candidate__details dd { margin-bottom: var(--space-2); } } @media (min-width: 1000px) { .candidate__photo { grid-column: 2 / 6; grid-row: 1 / 3; width: 100%; } .candidate__info { margin-top: var(--space-30); grid-column: 7 / -2; } .candidate__name { font-size: 2.4rem; text-align: left; } .candidate__name:first-child { margin-top: 0; } .candidate__details { margin-left: initial; margin-right: initial; } .candidate__photo + .candidate__name { margin-top: var(--space-30); } }