/* ============================================================
   Titanitos · Portada
   Prefijo tt- en todo para no interferir con Warehouse
   ============================================================ */
.tt-home{
  --tt-blue:#1767A8;        /* azul del logotipo */
  --tt-blue-d:#10517F;      /* el mismo, más oscuro, para pulsado */
  --tt-blue-l:#3E8DC0;      /* azul claro del logotipo */
  --tt-ink:#111; --tt-grey:#5E5B56; --tt-tile:#F1EFEC; --tt-line:#E3E0DB;
  --tt-pad:clamp(16px,3vw,44px); --tt-maxw:1440px; --tt-r:14px;
  --tt-sans:'Archivo',system-ui,-apple-system,sans-serif;
  --tt-serif:'Instrument Serif',Georgia,serif;
  font-family:var(--tt-sans); font-size:15px; line-height:1.55; color:var(--tt-ink);
}

/* Ningún elemento del bloque hereda el rojo de enlace del tema.
   Los enlaces toman el color de su contenedor salvo los que llevan azul propio. */
.tt-home a:not(.tt-b):not(.tt-add):not(.tt-p__add):not(.tt-ver),
.tt-home a:link:not(.tt-b):not(.tt-add):not(.tt-p__add):not(.tt-ver),
.tt-home a:visited:not(.tt-b):not(.tt-add):not(.tt-p__add):not(.tt-ver){color:inherit !important}

.tt-home .tt-ver,
.tt-home a.tt-ver,
.tt-home .tt-ver:link,
.tt-home .tt-ver:visited{color:var(--tt-blue) !important; border-color:var(--tt-blue) !important}
.tt-home .tt-ver:hover{color:var(--tt-blue-d) !important; border-color:var(--tt-blue-d) !important}

.tt-home .tt-b--light,
.tt-home a.tt-b--light,
.tt-home .tt-b--light:link,
.tt-home .tt-b--light:visited{color:#fff !important; border-color:rgba(255,255,255,.85) !important; background:transparent}
.tt-home .tt-b--light:hover{background:#fff !important; color:var(--tt-ink) !important; border-color:#fff !important}

.tt-home .tt-b--out,
.tt-home a.tt-b--out,
.tt-home .tt-b--out:link,
.tt-home .tt-b--out:visited{color:var(--tt-blue) !important; border-color:var(--tt-blue) !important}
.tt-home .tt-b--out:hover{background:var(--tt-blue) !important; color:#fff !important; border-color:var(--tt-blue) !important}

.tt-home .tt-b:not(.tt-b--out):not(.tt-b--light),
.tt-home a.tt-b:not(.tt-b--out):not(.tt-b--light){color:#fff !important}

/* El tema tiene reglas muy específicas: forzamos la nuestra dentro del bloque */
.tt-home *,
.tt-home button,
.tt-home input{font-family:var(--tt-sans)}
.tt-home .tt-hero__t,
.tt-home .tt-big em,
.tt-home .tt-marq__t em{font-family:var(--tt-serif)}
.tt-home a{color:inherit; text-decoration:none; border:0}
.tt-home a:hover{text-decoration:none}
.tt-home *,.tt-home *::before,.tt-home *::after{box-sizing:border-box}
.tt-home img{max-width:100%; height:auto; display:block}
.tt-home .tt-p{min-width:0}
.tt-home h1,.tt-home h2,.tt-home h3{margin:0; font-weight:600; letter-spacing:-.02em;
  line-height:1.05; color:var(--tt-ink); text-transform:none}
.tt-home .tt-mid{font-weight:600}
.tt-home .tt-cap{font-weight:600; color:inherit}
.tt-home a{color:inherit; text-decoration:none}
.tt-only-mob{display:none}
@media (max-width:900px){ .tt-only-desk{display:none} .tt-only-mob{display:block} }

.tt-cap{font-size:1.2rem; letter-spacing:.11em; text-transform:uppercase; font-weight:600}
.tt-cap--g{color:var(--tt-grey)}
.tt-ver{border-bottom:1px solid currentColor; padding-bottom:2px}
.tt-mid{font-size:clamp(1.7rem,2.8vw,2.4rem); letter-spacing:-.03em}
.tt-sec__h .tt-cap{font-size:1.05rem; letter-spacing:0; text-transform:none; font-weight:500}
.tt-big{font-size:clamp(2.9rem,6vw,5.4rem); font-weight:700; letter-spacing:-.04em; line-height:.98}
.tt-big em{font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-style:italic; letter-spacing:-.01em}
.tt-txt{font-size:.94rem; color:var(--tt-grey); line-height:1.7; max-width:52ch; margin:18px 0 24px}

.tt-b{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding:0 28px;
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  background:var(--tt-blue); color:#fff; border:1px solid var(--tt-blue); border-radius:10px; transition:.16s}
.tt-b:hover{background:var(--tt-blue-d); border-color:var(--tt-blue-d); color:#fff}
.tt-b--out{background:transparent; color:var(--tt-ink); border-color:var(--tt-line)}
.tt-b--out:hover{background:var(--tt-ink); color:#fff; border-color:var(--tt-ink)}
.tt-b--light{background:transparent; color:#fff; border-color:rgba(255,255,255,.8)}
.tt-b--light:hover{background:#fff; color:var(--tt-ink)}

/* --- Portada --- */
/* Rompe el contenedor de Warehouse para ir de borde a borde.
   --tt-sb es el ancho de la barra de desplazamiento, que calcula front.js:
   sin restarla, 100vw se pasa de largo y aparece scroll horizontal. */
.tt-hero,
.tt-overlay{
  width:calc(100vw - var(--tt-sb, 0px));
  max-width:none;
  margin-inline:calc(50% - (100vw - var(--tt-sb, 0px)) / 2);
}

.tt-hero{position:relative; height:calc(100svh - 140px); min-height:520px; overflow:hidden; background:#1a1a1a}
/* Capa de fondo: recibe la URL en su propio atributo style */
.tt-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}
.tt-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  margin:0; z-index:0;
}
.tt-hero::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.74) 100%)}
.tt-hero__in{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; color:#fff; padding:0}

.tt-hero__banda{
  width:100%;
  max-width:var(--tt-maxw);
  margin-inline:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;
  padding:clamp(22px,4vw,54px) var(--tt-pad);
}
.tt-hero__txt{display:flex; flex-direction:column; align-items:flex-start}

.tt-home .tt-hero__in,
.tt-home .tt-hero__in *{color:#fff !important}
.tt-home .tt-hero__t{
  font-family:var(--tt-serif) !important;
  font-weight:400;
  color:#fff !important;
  font-size:clamp(3.2rem,7.5vw,6.4rem);
  line-height:.98;
  letter-spacing:.035em;
  margin:10px 0 0;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
}
.tt-home .tt-hero__in .tt-cap{
  font-size:clamp(.84rem,1vw,.95rem);
  letter-spacing:.16em;
  font-weight:700;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}
.tt-home .tt-hero__sub{margin-top:12px; font-weight:600; opacity:.92}

/* Llamada sobre foto: marco blanco, se rellena al pasar el ratón.
   La comparten el hero y el banner a sangre. */
.tt-home .tt-hero__cta,
.tt-home a.tt-hero__cta,
.tt-home .tt-overlay__in .tt-hero__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:0 32px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:2px;
  background:transparent;
  color:#fff !important;
  font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.tt-home .tt-hero__cta:hover{background:#fff; color:var(--tt-ink) !important; border-color:#fff}
@media (max-width:900px){
  .tt-hero{height:auto; min-height:min(440px,72svh); aspect-ratio:3/4; max-height:78svh}
  .tt-hero__in{position:absolute; inset:0; justify-content:flex-end; padding:0}
  .tt-hero__banda{flex-direction:column; align-items:flex-start; gap:18px; padding:22px 20px 28px}
  .tt-home .tt-hero__t{font-size:clamp(2.6rem,11vw,3.4rem)}
  .tt-home .tt-hero__cta{width:100%; height:50px}
  .tt-hero::after{background:linear-gradient(transparent 40%,rgba(0,0,0,.55))}
}

/* --- Secciones --- */
.tt-sec{padding:clamp(48px,6vw,104px) 0}
.tt-sec__h{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-inline:var(--tt-pad); margin-bottom:24px; max-width:var(--tt-maxw); margin-inline:auto}

/* --- Carrusel de producto --- */
.tt-rail{position:relative; padding-inline:var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto;
  --g:clamp(12px,1.2vw,22px)}
.tt-rail__t{display:flex; gap:var(--g); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:4px}
.tt-rail__t::-webkit-scrollbar{display:none}
.tt-rail__t>.tt-p{flex:0 0 calc((100% - 3*var(--g))/4); min-width:0; scroll-snap-align:start}
.tt-rail__a{position:absolute; top:calc(50% - 40px); transform:translateY(-50%); z-index:4; width:44px; height:44px;
  border-radius:50%; background:#fff; border:1px solid var(--tt-line); cursor:pointer;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.4); transition:.16s}
.tt-rail__a:hover{background:var(--tt-blue); color:#fff; border-color:var(--tt-blue)}
.tt-rail__a--p{left:calc(var(--tt-pad) - 18px)}
.tt-rail__a--n{right:calc(var(--tt-pad) - 18px)}
.tt-rail__a[disabled]{opacity:0; pointer-events:none}

.tt-p__media{position:relative; background:var(--tt-tile); border-radius:var(--tt-r); overflow:hidden}
.tt-p__m{display:block; position:relative; aspect-ratio:1; overflow:hidden}
.tt-p__m img{width:100%; height:100%; object-fit:contain; padding:7%;
  mix-blend-mode:multiply}
.tt-p__lab{position:absolute; top:12px; left:12px; z-index:2; display:grid; gap:2px; justify-items:start}
.tt-p__lab span{font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--tt-grey)}
.tt-p__lab span.n{color:var(--tt-blue)}
.tt-p__q{position:absolute; left:10px; right:10px; bottom:10px; z-index:3; display:flex;
  flex-direction:column; align-items:stretch; gap:6px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(4px); padding:8px; border-radius:10px;
  opacity:0; transform:translateY(8px); transition:.22s}
.tt-p__szs{display:flex; flex-wrap:wrap; gap:1px; justify-content:center}
.tt-p__media:hover .tt-p__q{opacity:1; transform:translateY(0)}
.tt-sz{font-size:.76rem; padding:6px 8px; min-width:28px; color:var(--tt-grey); background:none; border:0; cursor:pointer}
.tt-sz{display:inline-flex; align-items:center; text-decoration:none;
  background:none; border:0; line-height:1}
.tt-home .tt-sz,
.tt-home a.tt-sz,
.tt-home .tt-sz:link,
.tt-home .tt-sz:visited{color:var(--tt-grey) !important; font-size:.84rem; padding:6px 7px;
  min-width:30px; justify-content:center; text-decoration:none}
.tt-home .tt-sz:hover{color:var(--tt-blue) !important; font-weight:600}
.tt-sz--out{opacity:.3; text-decoration:line-through; pointer-events:none}
.tt-sz--mas{color:var(--tt-grey); opacity:.7; pointer-events:none}
.tt-home .tt-add,
.tt-home a.tt-add,
.tt-home .tt-add:link,
.tt-home .tt-add:visited{display:block; width:100%; text-align:center;
  background:var(--tt-blue); color:#fff !important;
  border-radius:8px; padding:11px 16px; height:auto; min-height:0; line-height:1.2; border:0;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; text-decoration:none}
.tt-home .tt-add:hover,
.tt-home a.tt-add:hover{background:var(--tt-blue-d); color:#fff !important}
.tt-home .tt-p__b{display:flex; justify-content:space-between; gap:14px; padding:16px 2px 4px;
  font-size:1rem; letter-spacing:.02em; text-transform:uppercase; font-weight:500;
  line-height:1.4; color:var(--tt-ink)}
.tt-home .tt-p__b a,
.tt-home .tt-p__b span{color:var(--tt-ink) !important; text-decoration:none}
.tt-p__b s{color:var(--tt-grey); margin-right:6px; text-transform:none}
.tt-home .tt-p__login a{color:var(--tt-blue) !important; border-bottom:1px solid var(--tt-blue);
  padding-bottom:1px; font-size:.78rem}
.tt-p__c{display:flex; align-items:center; gap:6px; padding:10px 2px 0; flex-wrap:nowrap; overflow:hidden}
.tt-p__c a{width:54px; aspect-ratio:1; border:1px solid var(--tt-line); border-radius:7px;
  overflow:hidden; padding:2px; background:#fff; display:block; transition:border-color .15s}
.tt-p__c a:hover{border-color:var(--tt-ink)}
.tt-p__c img{width:100%; height:100%; object-fit:contain}
.tt-p__c a.is-on{border-color:var(--tt-ink); box-shadow:inset 0 0 0 1px var(--tt-ink)}
.tt-p__c span{display:block; width:100%; height:100%; border-radius:5px; background-size:cover}
.tt-p__c em{font-style:normal; font-size:.72rem; color:var(--tt-grey)}

/* Botón para pantallas táctiles: va al final de la tarjeta */
.tt-p__add{display:none}

/* Sin hover en táctil: tallas fuera, botón siempre visible */
/* Sin ratón o con ventana estrecha: se retira la capa de tallas.
   El cliente prefiere que no aparezca botón de añadir en móvil. */
@media (hover:none), (max-width:900px){
  .tt-p__q{display:none}
  .tt-home .tt-p__add{display:none}
  .tt-p__c{padding-bottom:6px}
}
@media (max-width:1180px){ .tt-rail__t>.tt-p{flex:0 0 calc((100% - 2*var(--g))/3)} }
@media (max-width:900px){
  .tt-rail__t>.tt-p{flex:0 0 calc((100% - var(--g))/2)}
  .tt-rail__a{display:none}
  .tt-p__c a:nth-child(n+4){display:none}
  .tt-p__c a{width:46px}
  .tt-home .tt-p__b{font-size:.94rem; padding-top:12px}
  .tt-cap{font-size:.8rem}
  .tt-txt{font-size:1rem}
  .tt-state{padding:28px 20px 34px}
  .tt-state__in .tt-txt{margin:14px 0 22px; font-size:1rem}
  .tt-home .tt-state .tt-b--out{width:100%; justify-content:center}
}

/* --- Carrito flotante --- */
.tt-fcart{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:1040;
  width:56px; height:56px; display:none; place-items:center;
  background:#fff; color:var(--tt-ink);
  border:1px solid var(--tt-line); border-right:0; border-radius:14px 0 0 14px;
  box-shadow:0 12px 34px -20px rgba(0,0,0,.45);
  text-decoration:none;
}
.tt-fcart.is-on{display:grid}
.tt-fcart:hover{background:var(--tt-blue); color:#fff; border-color:var(--tt-blue)}
.tt-fcart__n{
  position:absolute; top:6px; right:6px;
  display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  background:var(--tt-blue); color:#fff; border-radius:100px;
  font-size:.6rem; font-weight:700; font-family:var(--tt-sans);
}
.tt-fcart:hover .tt-fcart__n{background:#fff; color:var(--tt-blue)}
@media (max-width:900px){
  .tt-fcart{right:14px; bottom:88px; top:auto; transform:none; border-radius:50%;
    border:0; background:var(--tt-blue); color:#fff; width:52px; height:52px}
  .tt-fcart__n{background:#fff; color:var(--tt-blue); top:-5px; right:-5px}
}

/* --- Marquesina --- */
.tt-marq{overflow:hidden; padding:clamp(38px,5vw,72px) 0; border-top:1px solid var(--tt-line); border-bottom:1px solid var(--tt-line)}
.tt-marq__t{display:flex; gap:.4em; white-space:nowrap; width:max-content; animation:tt-run 26s linear infinite;
  font-size:clamp(2.2rem,6vw,5rem); font-weight:700; letter-spacing:-.04em; line-height:1}
.tt-marq__t em{font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400}
.tt-marq__t span{display:flex; gap:.4em; align-items:center; padding-right:.4em}
.tt-marq__t b{color:var(--tt-blue-l)}
@keyframes tt-run{to{transform:translateX(-50%)}}

/* --- Declaración --- */
.tt-state{padding:clamp(34px,3.6vw,64px) var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto}
.tt-state__in .tt-txt{
  margin:16px 0 26px;
  max-width:58ch;
  font-size:1.08rem;
  line-height:1.55;
  color:#222;
}
/* Llamada con caja, como en la referencia */
.tt-home .tt-state .tt-b--out,
.tt-home .tt-state a.tt-b--out{
  border:1px solid rgba(17,17,17,.28) !important;
  border-radius:4px;
  background:transparent !important;
  color:var(--tt-ink) !important;
  height:52px;
  padding:0 30px;
  font-size:.78rem;
  letter-spacing:.11em;
  font-weight:600;
}
.tt-home .tt-state .tt-b--out:hover{
  background:var(--tt-ink) !important;
  border-color:var(--tt-ink) !important;
  color:#fff !important;
}
.tt-state__in{max-width:900px}

/* --- Banner a sangre --- */
.tt-overlay{position:relative; min-height:min(78vh,620px); display:grid; align-items:center; overflow:hidden; background:#1a1a1a}
.tt-overlay__in{position:relative; z-index:2; color:#fff; padding:var(--tt-pad); max-width:640px}
.tt-overlay__in .tt-txt{color:rgba(255,255,255,.86); font-size:1rem; line-height:1.6;
  max-width:46ch; margin:16px 0 0}
.tt-overlay__in .tt-big{color:#fff}
@media (max-width:900px){
  .tt-overlay{min-height:min(380px,64svh); aspect-ratio:3/4}
  .tt-overlay::after{background:linear-gradient(transparent 35%,rgba(0,0,0,.6))}
  .tt-overlay__in{align-self:end}
}

/* --- Trío: dos productos y una foto --- */
.tt-trio{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(12px,1.2vw,22px);
  padding-inline:var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto; align-items:start}

/* La foto es más estrecha que los bodegones y algo más alta: así se ve
   entera, sin recortes, y el conjunto queda equilibrado. */
.tt-trio__ph{position:relative; border-radius:var(--tt-r); background:var(--tt-tile);
  aspect-ratio:3/4; display:block; overflow:hidden}
.tt-trio__ph img{width:100%; height:100%; display:block;
  object-fit:cover; border-radius:var(--tt-r); transition:transform .5s}
.tt-trio__ph:hover img{transform:scale(1.03)}
.tt-trio__ph span{position:absolute; left:16px; bottom:16px; background:#fff; border-radius:8px;
  padding:8px 14px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
@media (max-width:900px){
  .tt-trio{grid-template-columns:1fr 1fr; gap:14px}
  /* La foto es vertical: en móvil mantiene su proporción en vez de recortarse */
  /* Se fuerza por si queda alguna regla anterior de ediciones manuales */
  .tt-home .tt-trio__ph{grid-column:1/-1; aspect-ratio:3/4; margin-top:6px;
    display:block !important; width:100% !important}
  .tt-home .tt-trio__ph img{width:100% !important; height:100% !important;
    max-width:none !important; object-fit:cover !important}
}

/* --- Compra el look --- */
.tt-look{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:clamp(12px,1.2vw,22px); align-items:start;
  padding-inline:var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto}
.tt-look--solo{grid-template-columns:minmax(0,340px)}
.tt-look__ph{position:relative; overflow:hidden; border-radius:var(--tt-r); background:var(--tt-tile); aspect-ratio:4/3}
.tt-look__ph>img{width:100%; height:100%; object-fit:cover}
.tt-look__card{position:absolute; right:18px; bottom:18px; z-index:2; background:#fff; border-radius:12px;
  padding:9px; display:flex; gap:10px; align-items:center; width:230px}
.tt-look__card img{width:44px; height:44px; object-fit:cover; border-radius:8px; background:var(--tt-tile)}
.tt-look__t{display:flex; flex-direction:column; gap:3px; min-width:0}
.tt-look__t b{display:block; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; line-height:1.3}
.tt-look__t span{display:block; font-size:.72rem; color:var(--tt-grey); line-height:1}
@media (max-width:900px){ .tt-look{grid-template-columns:minmax(0,1fr)} }

/* --- Tecnología --- */
.tt-tech{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:start;
  padding-inline:var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto}
.tt-tech__fig{position:sticky; top:24px; aspect-ratio:4/5; background:var(--tt-tile); overflow:hidden;
  border-radius:var(--tt-r); margin:0}
.tt-tech__fig img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .45s}
.tt-tech__fig img.is-on{opacity:1}
.tt-tech__list{list-style:none; margin:0; padding:0}
.tt-tech__i{border-top:1px solid var(--tt-line); padding:22px 0; transition:border-color .2s}
.tt-tech__i:last-child{border-bottom:1px solid var(--tt-line)}
.tt-tech__i.is-on{border-top-color:var(--tt-blue)}
.tt-tech__b{width:100%; text-align:left; display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; background:none; border:0; cursor:pointer; padding:0}
.tt-tech__b h3{font-size:clamp(1.1rem,1.7vw,1.4rem)}
.tt-tech__i .tt-cap{color:var(--tt-grey); transition:color .2s}
.tt-tech__i.is-on .tt-cap,.tt-tech__i.is-on h3{color:var(--tt-blue)}
.tt-tech__p{max-height:0; overflow:hidden; transition:max-height .4s ease; color:var(--tt-grey);
  font-size:.92rem; line-height:1.7; margin:0}
.tt-tech__i.is-on .tt-tech__p{max-height:240px; margin-top:12px}
@media (max-width:900px){
  .tt-tech{grid-template-columns:1fr; gap:26px}
  .tt-tech__fig{position:relative; top:auto; aspect-ratio:1}
}

/* --- Comunidad --- */
.tt-ig{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1vw,18px);
  padding-inline:var(--tt-pad); max-width:var(--tt-maxw); margin-inline:auto}
.tt-ig a{position:relative; aspect-ratio:1; overflow:hidden; background:var(--tt-tile); border-radius:var(--tt-r)}
.tt-ig img{width:100%; height:100%; object-fit:cover}
.tt-ig span{position:absolute; inset:auto 10px 10px 10px; background:#fff; border-radius:8px; padding:7px 10px;
  text-align:center; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  opacity:0; transition:.2s}
.tt-ig a:hover span{opacity:1}
@media (max-width:900px){ .tt-ig{grid-template-columns:1fr 1fr} }