:root{--timeline-pane: clamp(220px, 25%, 30%);--timeline-center-line: 2px;--timeline-dot-size: 12px;--timeline-dot-ring: 3px;--timeline-dot-color: var(--primary-color);--dotted: var(--primary-color);--timeline-center-color: var(--quaternary-color);--timeline-dot-overhang: calc( (var(--timeline-dot-size) / 2) + var(--timeline-dot-ring) )}.timeline{position:relative;margin:20px}.timeline-header{text-align:center}.timeline-header h2{font-family:var(--h2-font-family);font-size:var(--h2-font-size);line-height:var(--h2-line-height);margin:var(--h2-margin);font-weight:var(--h2-font-weight);letter-spacing:var(--h2-letter-spacing);color:var(--primary-text-color)}@media (max-width: 749px){.timeline-header h2{font-family:var(--h2-mobile-font-family);font-size:var(--h2-mobile-font-size);line-height:var(--h2-mobile-line-height);margin:var(--h2-mobile-margin);font-weight:var(--h2-mobile-font-weight);letter-spacing:var(--h2-mobile-letter-spacing)}}@media (min-width: 750px) and (max-width: 989px){.timeline-header h2{font-family:var(--h2-tablet-font-family);font-size:var(--h2-tablet-font-size);line-height:var(--h2-tablet-line-height);margin:var(--h2-tablet-margin);font-weight:var(--h2-tablet-font-weight);letter-spacing:var(--h2-tablet-letter-spacing)}}.timeline-item{display:grid;grid-template-columns:1fr;row-gap:1rem}.timeline-text,.timeline-image{width:100%;justify-self:stretch;text-align:left}.timeline-text h3{font-family:var(--h3-font-family);font-size:var(--h3-font-size);line-height:var(--h3-line-height);margin:var(--h3-margin);font-weight:var(--h3-font-weight);letter-spacing:var(--h3-letter-spacing);color:var(--primary-text-color)}.timeline-text h4{font-family:var(--h4-font-family);font-size:var(--h4-font-size);line-height:var(--h4-line-height);margin:var(--h4-margin);font-weight:var(--h4-font-weight);letter-spacing:var(--h4-letter-spacing);color:var(--primary-text-color)}@media (max-width: 749px){.timeline-text h4{font-family:var(--h4-mobile-font-family);font-size:var(--h4-mobile-font-size);line-height:var(--h4-mobile-line-height);margin:var(--h4-mobile-margin);font-weight:var(--h4-mobile-font-weight);letter-spacing:var(--h4-mobile-letter-spacing)}}@media (min-width: 750px) and (max-width: 989px){.timeline-text h4{font-family:var(--h4-tablet-font-family);font-size:var(--h4-tablet-font-size);line-height:var(--h4-tablet-line-height);margin:var(--h4-tablet-margin);font-weight:var(--h4-tablet-font-weight);letter-spacing:var(--h4-tablet-letter-spacing)}}.timeline-text p{font-family:var(--body-font-family);font-size:var(--body-font-size);font-weight:var(--body-font-weight);color:var(--primary-text-color)}@media (min-width: 750px){.timeline:before{content:"";position:absolute;inset:5% auto 0 50%;width:var(--timeline-center-line);transform:translate(-50%);background:var(--timeline-center-color);z-index:1}.timeline-item{position:relative;display:grid;grid-template-columns:.5fr var(--timeline-center-line) .5fr;grid-template-rows:auto auto;align-items:start;margin:4rem 0;min-height:400px}.timeline-text,.timeline-image{display:block;width:var(--timeline-pane);min-width:0;position:relative;z-index:2;place-self:start;margin-top:0}.timeline-image{display:flex;align-items:center;grid-row:1}.timeline-image img{display:block;width:100%;height:auto;border-radius:8px}.timeline-item.left .timeline-text{grid-column:1;justify-self:start;text-align:left;width:100%}.timeline-item.right .timeline-text{grid-column:3;justify-self:end;text-align:right;width:100%}.timeline-item.left .timeline-image{grid-column:3;justify-self:end}.timeline-item.right .timeline-image{grid-column:1;justify-self:start}.timeline-item.left:before,.timeline-item.right:after{content:"";position:absolute;top:.9em;width:var(--timeline-dot-size);height:var(--timeline-dot-size);background:var(--secondary-color);border:var(--timeline-dot-ring) solid var(--timeline-dot-color);border-radius:50%;z-index:3;transform:translateY(-50%)}.timeline-item.left .timeline-text:before{right:calc(-1 * var(--timeline-dot-overhang))}.timeline-item.right .timeline-text:before{left:calc(-1 * var(--timeline-dot-overhang))}.timeline-item.left .timeline-text:after,.timeline-item.right .timeline-text:after{content:"";position:absolute;top:.9em;height:0;border-bottom:4px dotted var(--dotted);transform:translateY(-50%);z-index:2}.timeline-item.left:before{left:var(--timeline-pane);transform:translate(-50%,-50%)}.timeline-item.right:after{right:var(--timeline-pane);transform:translate(50%,-50%)}.timeline-item:before,.timeline-item:after{content:"";position:absolute;top:.9em;height:0;border-bottom:4px dotted var(--dotted);transform:translateY(-50%);z-index:2}.timeline-item.right.no-image:before{right:calc(var(--timeline-pane) + var(--timeline-dot-overhang));width:calc(50% - (var(--timeline-center-line) / 2) - var(--timeline-pane) - var(--timeline-dot-overhang))}.timeline-item.left.no-image:after{left:calc(var(--timeline-pane) + var(--timeline-dot-overhang));width:calc(50% - (var(--timeline-center-line) / 2) - var(--timeline-pane) - var(--timeline-dot-overhang))}.timeline-item.right.has-image:before,.timeline-item.left.has-image:after{right:calc(var(--timeline-pane) + var(--timeline-dot-overhang));width:calc(100% - (2 * var(--timeline-pane)) - var(--timeline-center-line) - (var(--timeline-dot-size) + 2 * var(--timeline-dot-ring)))}.timeline-item:last-child{margin-top:6rem}.timeline-item.left.has-image:last-child:after,.timeline-item.right.has-image:last-child:before{width:calc(139% - (2 * var(--timeline-pane)) - var(--timeline-center-line) - (var(--timeline-dot-size) + 2 * var(--timeline-dot-ring)));z-index:0}.timeline-item.left.no-image:last-child:after,.timeline-item.right.no-image:last-child:before{width:calc(50% - (var(--timeline-center-line) / 2) - var(--timeline-pane) - var(--timeline-dot-overhang));z-index:0}.timeline-item.right.has-image:last-child:after{right:0}.timeline-item.left.has-image:last-child:before{left:0}.timeline-item.left.has-image:last-child:after{left:0;z-index:0}.timeline-item.right.has-image:last-child:before{right:0;z-index:0}.timeline-item.right:last-child .timeline-image,.timeline-item.left:last-child .timeline-image,.timeline-item.right:last-child .timeline-text,.timeline-item.left:last-child .timeline-text{align-self:start;margin-top:25px}}
/*# sourceMappingURL=/cdn/shop/t/131/assets/timeline-grid.css.map */