102 lines
1.8 KiB
CSS
102 lines
1.8 KiB
CSS
.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);
|
|
}
|
|
}
|