.main-content{display:flex;flex-wrap:wrap;margin:2em auto;max-width:1200px;justify-content:space-around;align-items:center}.palette__wrapper{flex:1;padding:20px;display:flex;justify-content:center;flex-wrap:wrap}.palette{width:200px;height:200px;position:relative;display:inline-block;perspective:800px;font-family:"cursive"}.palette__cover{border-radius:6px;width:inherit;height:inherit;position:absolute;top:0;z-index:2;transition:.3s ease;transform-origin:top left;font:900 28px/.9 Poppins,sans-serif;text-transform:uppercase;color:#fff;overflow:hidden}.palette__cover__border{width:80%;height:80%;border:7px solid #fff;margin:10%}.palette__cover span{display:inline-block;position:absolute;bottom:7.5px;left:10px;padding:10px;max-width:50%}.palette__cover__top{position:absolute;left:0;width:calc(100% + 64px);margin-left:-32px;z-index:4;border-radius:3px 3px 4px 4px;opacity:0}.palette__base{background:#222;width:inherit;height:inherit;position:absolute;top:0;border-radius:8px;padding:15px;grid-gap:8px}.palette:hover .palette__cover{transform:rotateX(78deg)}.palette:hover .palette__cover__top{animation:startTransition .17s forwards .1s}.palette .title{font-family:Cambria;font-size:larger}@keyframes startTransition{0%{opacity:0;top:200px;transform:scale(.5);height:0}40%{opacity:1}to{top:22px;opacity:1;transform:scale(1);height:15px;box-shadow:0 5px 10px -2px #0003}}.palette__shade{border-radius:4px;box-shadow:inset 0 0 2px #000000e6}.palette--one .palette__base{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.palette--one .palette__shade:nth-child(1){grid-row:1/span 2;grid-column:2/span 1;margin:20px 0;background:#fadc89}.palette--one .palette__shade:nth-child(2){background:#fce95b}.palette--one .palette__shade:nth-child(3){background:#ffd03a}.palette--one .palette__shade:nth-child(4){background:#fde008}.palette--one .palette__shade:nth-child(5){background:#fec309}.palette--one .palette__shade:nth-child(6){background:#cc9c04}.palette--one .palette__shade:nth-child(7){background:#9b7705}.palette--one .palette__cover{background:#c2b303}.palette--one .palette__cover__top{background:#ecb404}.palette--one .palette__cover span{max-width:50%;background:#c2b303}.palette--two .palette__base{display:grid;grid-gap:12px;justify-self:center;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.palette--two .palette__cover{background:#ee4266}.palette--two .palette__cover__top{background:#e23a5d}.palette--two .palette__cover span{max-width:62%;background:#ee4266}.palette--two .palette__shade:nth-child(1){background:#ee898d}.palette--two .palette__shade:nth-child(2){background:#ec6b73}.palette--two .palette__shade:nth-child(3){background:#d25980}.palette--two .palette__shade:nth-child(4){background:#c24d88}.palette--three .palette__cover{background:#0075c4}.palette--three .palette__cover__top{background:#016cb4}.palette--three .palette__cover span{max-width:48%;background:#0075c4}.palette--three .palette__base{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.palette--three .palette__shade:nth-child(1){grid-row:1/span 2;grid-column:1/span 2;background:#93dfe3}.palette--three .palette__shade:nth-child(2){grid-row:3/span 2;background:#01c0f3}.palette--three .palette__shade:nth-child(3){grid-row:1/span 2;grid-column:3/span 2;background:#21d0e5}.palette--three .palette__shade:nth-child(4){grid-row:3/span 2;grid-column-start:4;background:#00aae7}.palette--three .palette__shade:nth-child(6){background:#69b3cd}.palette--three .palette__shade:nth-child(5){background:#4ad1eb}.palette--three .palette__shade:nth-child(8){background:#0983d5}.palette--three .palette__shade:nth-child(7){background:#149ecb}.palette--four .palette__base{display:grid;grid-template-columns:50% auto;grid-template-rows:auto 20% 20%}.palette--four .palette__shade:nth-child(1){grid-row:1/span 2;background:#bfbfbf}.palette--four .palette__shade:nth-child(2){grid-row:3/span 1;background:#a1a1a1}.palette--four .palette__shade:nth-child(3){background:#717171}.palette--four .palette__shade:nth-child(4){background:#585858}.palette--four .palette__shade:nth-child(5){background:#4b4b4b}.palette--four .palette__cover{background:#2a2e45}.palette--four .palette__cover__top{background:#171926}.palette--four .palette__cover span{max-width:59%;background:#2a2e45}.palette--five .palette__base{display:grid;grid-gap:12px;justify-self:center;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.palette--five .palette__cover{background:#ad74c4}.palette--five .palette__cover__top{background:#8c0aa9}.palette--five .palette__cover span{max-width:62%;background:#ad74c4}.palette--five .palette__shade:nth-child(1){background:#ad74c4}.palette--five .palette__shade:nth-child(2){background:#460681}.palette--five .palette__shade:nth-child(3){background:#5a3470}.palette--five .palette__shade:nth-child(4){background:#7f0df8}.palette--six .palette__base{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.palette--six .palette__shade:nth-child(1){grid-row:1/span 2;grid-column:2/span 1;margin:20px 0;background:tomato}.palette--six .palette__shade:nth-child(2){background:#881b08}.palette--six .palette__shade:nth-child(3){background:#ce9e96}.palette--six .palette__shade:nth-child(4){background:#c27163}.palette--six .palette__shade:nth-child(5){background:#ef3210}.palette--six .palette__cover{background:tomato}.palette--six .palette__cover__top{background:#e8e15926}.palette--six .palette__cover span{max-width:50%;background:tomato}.palette--seven .palette__cover{background:#f27f2b}.palette--seven .palette__cover__top{background:orange}.palette--seven .palette__cover span{max-width:48%;background:#f27f2b}.palette--seven .palette__base{display:grid;grid-gap:8px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.palette--seven .palette__shade:nth-child(1){grid-row:1/span 2;grid-column:1/span 2;background:orange}.palette--seven .palette__shade:nth-child(2){grid-row:3/span 2;background:orange}.palette--seven .palette__shade:nth-child(3){grid-row:1/span 2;grid-column:3/span 2;background:orange}.palette--seven .palette__shade:nth-child(4){grid-row:3/span 2;grid-column-start:4;background:#9a6912}.palette--seven .palette__shade:nth-child(6){background:#eacc0a}.palette--seven .palette__shade:nth-child(5){background:#a16d0f}.palette--seven .palette__shade:nth-child(8){background:#eed995}.palette--seven .palette__shade:nth-child(7){background:#ef963c}