﻿.timeline{margin:1.5rem 1.5rem}@media screen and (min-width: 80rem){.timeline{margin-left:auto;margin-right:auto;max-width:60rem}}.timeline{display:flex;flex-direction:column;align-items:center}.timeline>.stamp{display:inline-block;flex-shrink:0;width:4rem;height:4rem;z-index:10;border:.2rem solid #d6d6d6;border-radius:100%;line-height:3.6rem;text-align:center;background-color:#fff;transition:border-color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9),background-color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9),color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}.timeline>.stamp.small{background-color:#d6d6d6}.timeline>.content>p{margin-left:0;margin-right:0}.timeline>.content>h3:first-child{text-align:center}.timeline>.content>h3:first-child>time{display:block;padding-inline:.5rem;font-size:1rem;font-weight:400}@media screen and (min-width: 80rem){.timeline{flex-direction:row;align-items:flex-start}.timeline>.content{position:relative;flex-grow:1;margin-left:1.5rem;margin-bottom:1.5rem}.timeline>.content::before{content:"";position:absolute;top:0;right:calc(100% + 3.5rem);bottom:-1.5rem;width:.2rem;background-color:#d6d6d6;transform:translateX(50%);transition:background-color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}.timeline>.content>h3:first-child{position:relative;margin-top:0;margin-left:2.5rem;line-height:4rem;text-align:left}.timeline>.content>h3:first-child::after{content:"";position:absolute;right:calc(100% + 0.5rem);top:50%;width:4rem;height:.2rem;background-color:#d6d6d6;transform:translateY(-100%);transition:background-color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}.timeline>.content>h3:first-child>time{display:inline-block;float:right;transition:background-color .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}}.timeline:hover>.stamp{border-color:#484d6d;background-color:#484d6d;color:#fff}.timeline:hover>.content::before,.timeline:hover>.content>h3:first-child::after{background-color:#484d6d}.timeline:hover>.content>h3:first-child>time{background-color:#ffffa4}[data-coderdojo] .timeline:hover>.stamp{border-color:#f45520;background-color:#f45520;color:#fff}[data-coderdojo] .timeline:hover>.content::before,[data-coderdojo] .timeline:hover>.content>h3:first-child::after{background-color:#f45520}[data-coderdojo] .timeline:hover>.content>h3:first-child>time{background-color:#fffaf7}.timeline:last-child{margin-bottom:0}.timeline:last-child>.content{padding-bottom:1.5rem}.timeline+.timeline{margin-top:-1.5rem}.gallery-preview{position:relative;display:grid;grid-template-columns:var(--x1, 50%) minmax(0, 1fr);grid-template-rows:var(--y1, 50%) minmax(0, 1fr);gap:.3rem;padding:.3rem;height:27rem;background-color:#484d6d;box-shadow:.1rem .4rem .4rem rgba(29, 29, 29, 0.1),.25rem 1rem 1rem rgba(29, 29, 29, 0.1)}.gallery-preview,.gallery-preview:any-link{transition:grid-template .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}.gallery-preview>img{object-fit:cover;width:100%;height:100%}.gallery-preview:not(.flip)>img:nth-of-type(1){grid-row:1/span 2}.gallery-preview.flip>img:nth-of-type(3){grid-column:2;grid-row:1/span 2}.gallery-preview::after{content:"➜";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;font-size:1.95rem;background-color:rgba(0,0,0,.4666666667);color:#fff;opacity:0;transition:opacity .1s cubic-bezier(0.56, 0.03, 0.35, 0.9)}.gallery-preview:hover{grid-template-columns:var(--x2, var(--x1, 50%)) minmax(0, 1fr);grid-template-rows:var(--y2, var(--x2, 50%)) minmax(0, 1fr)}.gallery-preview:hover::after{opacity:1}.gallery-preview.horizontal{grid-template-columns:var(--a1, 33.3%) var(--b1, 33.3%) minmax(0, 1fr);grid-template-rows:minmax(0, 1fr)}.gallery-preview.horizontal>img:nth-of-type(1),.gallery-preview.horizontal>div:nth-of-type(1)>img,.gallery-preview.horizontal>img:nth-of-type(3),.gallery-preview.horizontal>div:nth-of-type(3)>img{grid-column:unset;grid-row:unset}.gallery-preview.horizontal:hover{grid-template-columns:var(--a2, 33.3%) var(--b2, 33.3%) minmax(0, 1fr)}.gallery-preview.horizontal.two{grid-template-columns:var(--a1, 50%) minmax(0, 1fr)}.gallery-preview.horizontal.two:hover{grid-template-columns:var(--a2, 50%) minmax(0, 1fr)}/*# sourceMappingURL=timeline.css.map */
