main {
|
--gap: 0;
|
section:last-of-type {
|
margin-bottom: 0;
|
}
|
}
|
|
#at-a-glance {
|
padding: 0 10vw;
|
--gap: 0;
|
img {
|
width: 100%;
|
height: auto;
|
border: 2px solid var(--action-0);
|
}
|
h3 {
|
font-size: var(--txt-x-small);
|
}
|
.before {
|
img {
|
border-right-width: 1px;
|
border-left: 0;
|
border-top: 0;
|
}
|
}
|
.after {
|
img {
|
border-left-width: 1px;
|
border-right: 0;
|
border-bottom: 0;
|
}
|
}
|
}
|
|
.timeline-point.timeline-point {
|
--lineWidth: 1px;
|
--gap: 2rem;
|
padding: 0;
|
margin:0;
|
background-color: var(--base);
|
max-width: 100vw;
|
position: relative;
|
overflow: hidden;
|
img {
|
width: 40%;
|
border-radius: 4px;
|
position: sticky;
|
padding: .5rem;
|
}
|
.info {
|
padding: 1rem .5rem .5rem;
|
width: 60%;
|
position: relative;
|
h2 {
|
margin: 0 0 .5rem;
|
font-size: var(--txt-medium);
|
position: relative;
|
.icon {
|
--w: 2.5rem;
|
transform: rotate(-90deg);
|
position: absolute;
|
left: -2.5rem;
|
top: .25rem;
|
background-color: var(--action-100);
|
}
|
}
|
|
}
|
&::before,
|
&::after {
|
content: '';
|
display: block;
|
position: absolute;
|
left: 45%;
|
height: 100%;
|
width: var(--lineWidth);
|
background-color: var(--action-0);
|
//box-shadow: var(--action-shadow);
|
}
|
&::before {
|
height: 1rem;
|
}
|
&::after {
|
top: 4rem;
|
}
|
&#before-treatment::before,
|
&:last-of-type::after {
|
display: none;
|
}
|
}
|
@media (min-width:768px) {
|
#at-a-glance {
|
h3 {
|
font-size: var(--txt-x-large);
|
}
|
}
|
.timeline-point.timeline-point {
|
--gap: 4rem;
|
img {
|
width: 50%;
|
}
|
.info {
|
width: 50%;
|
padding: 25vh 1rem 1rem;
|
h2 {
|
.icon {
|
--w: 4rem;
|
left: -6.15rem;
|
top: 0;
|
}
|
}
|
a {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
|
time {
|
text-transform: uppercase;
|
font-size: var(--txt-x-small);
|
}
|
}
|
&::before,
|
&::after {
|
left: calc(50% + 2rem);
|
}
|
|
&::before {
|
height: calc(25vh - 2rem);
|
}
|
&::after {
|
top: calc(25vh + 6rem);
|
}
|
}
|
}
|
