.bg-primary{background-color:var(--primary-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-tertiary{background-color:var(--tetriary-color)}.bg-fourth{background-color:var(--fourth-color)}.card-showcase{display:flex;flex-direction:column;padding:1rem;margin:0}.card-showcase h1{width:100%;margin-top:1rem;padding-bottom:1rem;border-bottom:var(--primary-color) solid 2px;text-shadow:black 0px 2px 4px;text-transform:uppercase}.card-showcase a{margin-top:auto;position:absolute;bottom:1rem;left:50%;translate:-50% 0;border:#1b202d solid;border-radius:0.5rem 0.5rem 0rem 0rem;border-width:0.5rem 0.5rem 0px 0.5rem;text-transform:uppercase}.card-showcase a .button-5{box-shadow:#00000075 0px 4px 8px;border:none;outline:var(--background-color) solid 0.5rem}.span-1_1{grid-column:span 1;grid-row:span 1;& >img{aspect-ratio:1}}.span-1_2{grid-column:span 1;grid-row:span 2;& >img{aspect-ratio:1 / 2}}.span-2_1{grid-column:span 2;grid-row:span 1;& >img{aspect-ratio:2 / 1}}.span-2_2{grid-column:span 2;grid-row:span 2;& >img{aspect-ratio:1}}.case-grid{display:grid;gap:0.35rem;padding:1rem;height:100%;margin-inline:auto;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);overflow-y:auto}@media (max-width:600px){.case-grid{padding:0.35rem;padding-bottom:4rem;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}.span-2_1{grid-column:span 1;grid-row:span 1}.span-1_2{grid-column:span 1;grid-row:span 1}.case:last-child{grid-column:span 2;grid-row:span 2}.card-showcase{padding:0}.card-showcase h1{position:sticky;top:0;padding:1rem;margin:0;font-size:2rem;background-image:linear-gradient(transparent -50%,var(--background-color-second) 125%);z-index:10;outline:var(--background-color-second) solid 1px}.card-showcase a{border:none}.card-showcase a .button-5{outline:none}}.case{font-size:var(--fs-400);border-radius:0.25rem;overflow:clip;animation:animateCell 600ms ease-out;animation-play-state:paused;animation-fill-mode:backwards;-webkit-transition:all 0.5s;transition:all 0.5s}.case:hover{box-shadow:var(--secondary-color) 0px 0px 4px,var(--secondary-color) 0px 2px 4px,var(--secondary-color) 0px 0px 8px;& img{transform:scale(1.1)}}.case img{width:100%;height:100%;object-fit:cover;border-radius:0;-webkit-transition:transform 0.25s;transition:transform 0.25s}@keyframes animateCell{from{opacity:0;transform:scale(0.3)}to{opacity:1;transform:scale(1)}}