.colourCardMini{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:32px;flex:1 1;max-width:240px;min-width:160px;padding-bottom:48px;transition:.3s;position:relative;background-color:#fff}@media screen and (max-width:768px){.colourCardMini{flex-direction:row;padding-bottom:0;border-radius:24px;width:100%;justify-content:flex-start;gap:32px}}.colourCardMini:hover{transform:scale(1.025)}.colourCardMini:hover .lockButton,.colourCardMini:hover .removeButton{background-color:hsla(0,0%,100%,.6)!important}.colourCardMini:hover .lockButton img,.colourCardMini:hover .removeButton img{filter:invert(1);opacity:1!important}.colourCardMini:hover .lockButton:hover img,.colourCardMini:hover .removeButton:hover img{filter:brightness(0)}.colourCardMini .colourBoxAndButtonsContainer{width:100%;aspect-ratio:1/1.3;max-height:400px;cursor:pointer;border-radius:32px 32px 0 0;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;overflow:hidden;position:relative}@media screen and (max-width:768px){.colourCardMini .colourBoxAndButtonsContainer{aspect-ratio:1/1;width:128px;height:100%;border-radius:24px 0 0 24px}}@media screen and (max-width:425px){.colourCardMini .colourBoxAndButtonsContainer{aspect-ratio:1/1.6;width:80px}}.colourCardMini .colourBoxAndButtonsContainer .colourBox{position:absolute;width:100%;height:100%;cursor:pointer;z-index:0}.colourCardMini .colourBoxAndButtonsContainer .removeButton{border:0;border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer;background-color:hsla(0,0%,100%,0);transition:all .3s ease;z-index:5}@media screen and (max-width:768px){.colourCardMini .colourBoxAndButtonsContainer .removeButton{width:32px;height:32px;background-color:hsla(0,0%,100%,.6)}}@media screen and (max-width:425px){.colourCardMini .colourBoxAndButtonsContainer .removeButton{width:28px;height:28px}}.colourCardMini .colourBoxAndButtonsContainer .removeButton:active,.colourCardMini .colourBoxAndButtonsContainer .removeButton:focus{outline:none}.colourCardMini .colourBoxAndButtonsContainer .removeButton img{width:20px;height:24px;filter:invert(0) brightness(1);opacity:0;transition:all .3s ease}@media screen and (max-width:768px){.colourCardMini .colourBoxAndButtonsContainer .removeButton img{width:14px;height:18px;opacity:1}}@media screen and (max-width:425px){.colourCardMini .colourBoxAndButtonsContainer .removeButton img{width:12px;height:16px}}.colourCardMini .colourBoxAndButtonsContainer .removeButton:hover{background-color:hsla(0,0%,100%,.8)}.colourCardMini .inputs{margin-top:24px;gap:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (max-width:768px){.colourCardMini .inputs{margin-top:-4px;align-items:flex-start}}.colourCardMini .inputs .colourInput{display:flex;justify-content:center;align-items:center;font-size:1rem;font-weight:500;gap:4px}@media screen and (max-width:768px){.colourCardMini .inputs .colourInput{font-size:1.2rem;gap:8px}}@media screen and (max-width:425px){.colourCardMini .inputs .colourInput{gap:6px}}.colourCardMini .inputs .colourInput input{font-size:1rem;font-weight:500;width:28px;-moz-appearance:textfield}@media screen and (max-width:768px){.colourCardMini .inputs .colourInput input{font-size:1.2rem}}.colourCardMini .inputs .colourInput input:disabled{cursor:not-allowed}.colourCardMini .inputs .colourInput input:active,.colourCardMini .inputs .colourInput input:focus{outline:none}.colourCardMini .inputs .colourInput input::-webkit-inner-spin-button,.colourCardMini .inputs .colourInput input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.colourCardMini .inputs .colourInput.hexInput{gap:2px}.colourCardMini .inputs .colourInput.hexInput input{width:64px}.colourCardMini .inputs .copyIcon{cursor:pointer;transition:all .3s ease;background-color:transparent;width:28px;display:flex;justify-content:center;align-items:center}.colourCardMini .inputs .copyIcon img{width:20px;height:20px;opacity:.6}@media screen and (max-width:768px){.colourCardMini .inputs .copyIcon img{width:16px;height:16px}}@media screen and (max-width:425px){.colourCardMini .inputs .copyIcon img{width:14px;height:14px}}.colourCardMini .inputs .copyIcon:hover{transform:scale(1.1)}.colourCardMini .inputs .copyIcon:hover img{opacity:1}.gradientCardMini{display:flex;aspect-ratio:1/1.3;flex-direction:column;align-items:center;justify-content:center;border-radius:32px;width:100%;transition:.3s;position:relative;cursor:pointer}@media screen and (max-width:768px){.gradientCardMini{aspect-ratio:1/1.5;width:128px;height:100%;border-radius:24px}}.gradientCardMini:hover{transform:scale(1.025)}.gradientCardMini:hover .lockButton,.gradientCardMini:hover .removeButton{background-color:hsla(0,0%,100%,.6)!important}.gradientCardMini:hover .lockButton img,.gradientCardMini:hover .removeButton img{filter:invert(1)}