*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}body{margin:0;min-height:100dvh;display:grid;place-items:center;font-family:Roboto,sans-serif;background-color:#f4c66a}@media (width >= 768px){body{padding:15px}}.icon{display:inline-block;width:1em;aspect-ratio:1;background-repeat:no-repeat;background-size:var(--icon-bg-size, 100%) var(--icon-bg-size, 100%);background-position:center}.icon--plus{background-image:linear-gradient(to right,transparent calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% + var(--icon-line-size, 2px) / 2),transparent 0),linear-gradient(to bottom,transparent calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% + var(--icon-line-size, 2px) / 2),transparent 0)}.icon--minus{background-image:linear-gradient(to bottom,transparent calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% - var(--icon-line-size, 2px) / 2),currentColor calc(50% + var(--icon-line-size, 2px) / 2),transparent 0)}.wallet{display:grid;grid-template-rows:min-content 1fr;width:100%;height:100dvh;max-width:1046px;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 0 16px #0003}@media (width >= 768px){.wallet{max-height:572px;grid-template-rows:auto;grid-template-columns:1fr 2fr}}.wallet__sidebar{background-color:#f0f0f0;overflow:auto}.wallet__cards{display:flex;overflow:auto;gap:30px;scroll-snap-type:x mandatory;padding-bottom:30px;padding-inline:clamp(30px,4vw,47px)}@media (width >= 768px){.wallet__cards{flex-direction:column}}.wallet__head{display:flex;align-items:center;justify-content:space-between;column-gap:10px;padding-block:clamp(30px,5vw,50px);padding-inline:clamp(30px,4vw,47px)}.wallet__title{font-size:clamp(20px,4vw,24px);text-transform:capitalize}.wallet__button{display:flex;justify-content:center;align-items:center;width:30px;aspect-ratio:1;border:none;font-size:24px;background-color:transparent;color:#4e4e4e;transition:color .3s ease}@media (hover: hover){.wallet__button{cursor:pointer}.wallet__button:hover{color:#7c85af}}.wallet__content{overflow-y:auto}.wallet__total{font-weight:700;font-size:clamp(23px,3vw,33px)}.wallet__total sup{font-size:.7em}.wallet__transactions{display:flex;flex-direction:column;row-gap:44px;border-top:2px solid #d9d9d9;margin-inline:clamp(15px,4vw,47px);padding-block:clamp(15px,5vw,60px)}.card{display:flex;row-gap:8px;flex-direction:column;border:2px solid #d9d9d9;border-radius:4px;padding:20px 15px 15px;background-color:#fff;color:#4e4e4e;scroll-snap-align:center;width:100%;max-width:290px;flex-shrink:0}@media (hover: hover){.card{cursor:pointer}.card:hover{border-color:#7c85af}}.card__image{display:block;width:76px;padding-bottom:5px}.card--active{border-color:#7c85af}.card__number{font-size:18px;white-space:nowrap;font-weight:500;letter-spacing:.02em}.card__validity{font-weight:500;font-size:17px}.transaction{display:flex;align-items:center;column-gap:clamp(10px,3vw,36px);color:#4e4e4e;--icon-bg-size: 50%}.transaction__icon{width:22px;aspect-ratio:1;border:1px solid #d9d9d9;border-radius:50%;flex-shrink:0}.transaction__info{display:flex;flex-direction:column;row-gap:5px}.transaction__name{text-transform:capitalize;font-weight:700;font-size:clamp(16px,5vw,20px);color:#000;text-wrap:pretty}.transaction__date{text-transform:capitalize;color:#4e4e4e;font-size:clamp(12px,3vw,16px);text-wrap:pretty}.transaction__total{margin-left:auto;font-size:clamp(17px,5vw,20px);font-weight:700}.transaction__total sup{font-size:.7em}.transaction--in .transaction__total{color:#6ed200}.transaction--out .transaction__total{color:#7387b7}