@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500&display=swap');

.resource-template-cards{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;gap:16px;margin-top:60px;font-family:Inter,sans-serif;color:rgb(16,16,16)}
.resource-template-cards .c74{font-family:'General Sans',Inter,sans-serif;font-size:16px;line-height:1.4;color:rgb(96,96,96)}
.resource-template-cards .c135{width:13px;height:13px;background:#fff;-webkit-mask:url(../../assets/icons/arrow-tr.svg) center/contain no-repeat;mask:url(../../assets/icons/arrow-tr.svg) center/contain no-repeat}
.resource-template-cards .c138{font-weight:600;font-size:22px;line-height:1.25;color:#161513}
.resource-template-cards .c166{position:relative;width:344px;height:530px;zoom:.86;border-radius:40px;background:var(--white,#fff);border:1px solid var(--line,#e7e2f0);box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:hidden;flex-shrink:0}
.resource-template-cards .c167{position:absolute;left:24px;top:24px;width:296px;height:300px;border-radius:20px;background:rgb(217,217,217);overflow:hidden;clip-path:path('M 22.5 28 C 30.232 28 36.5 21.732 36.5 14 C 36.5 6.268 42.768 0 50.5 0 L 276 0 C 287.046 0 296 8.954 296 20 L 296 247.5 C 296 258.546 287.046 267.5 276 267.5 L 220.75 267.5 C 211.775 267.5 204.5 274.775 204.5 283.75 C 204.5 292.725 197.225 300 188.25 300 L 20 300 C 8.954 300 0 291.046 0 280 L 0 46.25 C 0 36.171 8.171 28 18.25 28 Z')}
.resource-template-cards .c167__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#ece6f7}
.resource-template-cards .c167__img--cover{object-fit:cover}
.resource-template-cards .c168{position:absolute;left:21px;top:75px;width:254px;display:flex;flex-direction:column;gap:16px}
.resource-template-cards .c169{border-radius:5.17px;background:#fff;padding:17.229px;box-shadow:0 1.7px 6.9px rgba(35,47,53,.09);display:flex;flex-direction:column;gap:8.6px;font-size:12px;line-height:1.2;color:#000}
.resource-template-cards .c170{border-radius:5.17px;background:var(--purple,#5932c1);padding:17.22px;font-size:12px;line-height:1.2;color:#fff;white-space:nowrap}
.resource-template-cards .c171{position:absolute;left:24px;top:348px;width:296px;display:flex;flex-direction:column;gap:4px}
.resource-template-cards .c172{position:absolute;left:24px;top:458px;width:296px;height:48px;border-radius:100px;background:#1d1533;display:flex;gap:10px;justify-content:center;align-items:center;font-weight:500;font-size:16px;color:#fff}
.resource-template-cards .c172:hover{background:var(--purple-dark,#27115f);color:#fff}

/* Abas acima dos cards (referencia: image copy 2.png). Linha fina de base
   na largura toda e traco mais grosso, preto, so sob a aba ativa. */
.resource-tabs{display:flex;justify-content:center;gap:56px;margin-top:56px;border-bottom:1px solid #1d1d21;font-family:'General Sans',Inter,sans-serif}
.resource-tab{position:relative;appearance:none;border:0;background:none;padding:14px 32px 18px;margin-bottom:-1px;font:inherit;font-weight:400;font-size:17px;line-height:1.3;color:#3a3a3f;cursor:pointer;white-space:nowrap;transition:color .2s}
.resource-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#000;transform:scaleX(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.resource-tab:hover,.resource-tab:focus-visible{color:#161513;outline:none}
.resource-tab.is-active{color:#161513}
.resource-tab.is-active::after{transform:scaleX(1)}
.resource-tabs + .resource-template-cards{margin-top:48px}

@media(max-width:700px){
  .resource-tabs{gap:8px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .resource-tabs::-webkit-scrollbar{display:none}
  .resource-tab{padding:12px 16px 14px;font-size:15px}
}

@media(max-width:1280px){
  .resource-template-cards{grid-template-columns:repeat(4,344px);justify-content:start;overflow-x:auto;padding:0 max(0px,calc((100% - 344px)/2)) 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .resource-template-cards .c166{zoom:1;scroll-snap-align:center}
}