<div class="card-result-payment-swiper">
<div class="card-result-payment__nav-tabs">
<span class="title-m
">Elige la hipoteca que más va contigo.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="menu-tab__wrapper">
<div class="menu-tab" role="tablist">
<div class="menu-tab-scroller">
<div class="menu-tab-scroller__scroll menu-tab-scroller__scroll-- ">
<div class="menu-tab-scroller__scroll-content">
<button class="menu-tab-button menu-tab-item active " role="tab" aria-selected="true" tabindex="0" id="tab-1">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Fija</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item " role="tab" aria-selected="true" tabindex="0" id="tab-2">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Mixta</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item inactive " role="tab" aria-selected="true" tabindex="0" id="tab-3">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Variable</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
</div>
</div>
</div>
</div>
<!--content menu-tab-->
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="card-result-payment swiper-slide">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="wrap-img"><img src="/dist/images/tipofijo.svg" alt=""></span>
<span class="title-l
">Hipoteca Fija</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment__form-radio-group">
<span class="bodycopy-m">Desde 10 a 30 años a tipo de interés fijo</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="resto-amortizacion">
<div class="title-with-tooltip"><span class="bodycopy-m">Los 30 años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment__item-number">
<li><span class="title-xl
">772,14</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
</ul>
<ul class="tin-item">
<li class="withTooltip">
<div class="
bodycopy-m
">
TIN
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="tin-cifra">
4,75%
</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li class="withTooltip">
<div class="
bodycopy-m
">
TAE
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tae" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<p id="tae-cifra" class="
title-xl
">4,85</p>
<span class="bodycopy-m">%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</li>
<li class="card-result-payment__financing">
<div class="
bodycopy-m
">
Te financiamos
</div>
<div class="
bodycopy-m
">
132.800 €
</div>
</li>
<li class="tin-tae-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Consulta condiciones</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</li>
</ul>
</div>
<ul class="card-result-payment__additional">
<li class="tit">
<div class="
bodycopy-m
">
Desglose de impuestos y gastos
</div>
<a class="link
link_inline
" href="#">
<span>Ver detalle</span>
</a>
</li>
<li>
<ul>
<li><label class="label-m" for="">ahorro aportado</label>
</li>
<li>
<div class="
bodycopy-m
" id="ahorro-aportado">
33.800€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">IMPUESTO Y GASTOS</label>
</li>
<li>
<div class="
bodycopy-m
" id="impuestos-gastos">
14.300€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">En total, necesitas tener ahorrado</label>
</li>
<li>
<div class="
bodycopy-m
" id="total-ahorrado">
48.100€
</div>
</li>
</ul>
</li>
</ul>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Solicita tu estudio personalizado
</a>
</div>
</div>
<div class="card-result-payment swiper-slide">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="wrap-img"><img src="/dist/images/tipomixto.svg" alt=""></span>
<span class="title-l
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment__form-radio-group">
<span class="bodycopy-m">A tipo de interés fijo... Los restantes a tipo variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="form-radio-group " id="anhos">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos5" type="radio" title="anhos5" name="anhos" value="5 años">
<label class="radio-label " for="anhos5" id="" value="">
<span class="caption-placeholder-m">5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos10" type="radio" title="anhos10" name="anhos" value="10 años" checked>
<label class="radio-label " for="anhos10" id="" value="">
<span class="caption-placeholder-m">10 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos15" type="radio" title="anhos15" name="anhos" value="15 años">
<label class="radio-label " for="anhos15" id="" value="">
<span class="caption-placeholder-m">15 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<div class="title-with-tooltip"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment__item-number">
<li><span class="title-xl
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
</ul>
<ul class="tin-item">
<li class="withTooltip">
<div class="
bodycopy-m
">
TIN
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="tin-cifra">
4,75%
</div>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<div class="title-with-tooltip"><span class="bodycopy-m">Los 15 siguientes años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment__item-number">
<li><span class="title-l
">Euribor + 1,95</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li>
<div id="resultado-cuota-resto-amortizacion-cifra-symbol" class="
bodycopy-l
">%</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li class="withTooltip">
<div class="
bodycopy-m
">
TAE Variable
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tae" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<p id="tae-cifra" class="
title-xl
">4,85</p>
<span class="bodycopy-m">%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</li>
<li class="card-result-payment__financing">
<div class="
bodycopy-m
">
Te financiamos
</div>
<div class="
bodycopy-m
">
132.800 €
</div>
</li>
<li class="tin-tae-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Consulta condiciones</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</li>
</ul>
</div>
<ul class="card-result-payment__additional">
<li class="tit">
<div class="
bodycopy-m
">
Desglose de impuestos y gastos
</div>
<a class="link
link_inline
" href="#">
<span>Ver detalle</span>
</a>
</li>
<li>
<ul>
<li><label class="label-m" for="">ahorro aportado</label>
</li>
<li>
<div class="
bodycopy-m
" id="ahorro-aportado">
33.800€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">IMPUESTO Y GASTOS</label>
</li>
<li>
<div class="
bodycopy-m
" id="impuestos-gastos">
14.300€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">En total, necesitas tener ahorrado</label>
</li>
<li>
<div class="
bodycopy-m
" id="total-ahorrado">
48.100€
</div>
</li>
</ul>
</li>
</ul>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Solicita tu estudio personalizado
</a>
</div>
</div>
<div class="card-result-payment swiper-slide">
<div class="card-result-payment__head">
<div class="card-result-payment__title">
<span class="wrap-img"><img src="/dist/images/variable.svg" alt=""></span>
<span class="title-l
">Hipoteca Variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment__form-radio-group">
<span class="bodycopy-m">1 año a tipo fijo. El resto a variable hasta 30 años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="wrap-items">
<ul class="items">
<li class="card-result-payment__item " id="periodo-gracia">
<div class="title-with-tooltip"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment__item-number">
<li><span class="title-xl
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li>
<div id="resultado-cuota-segundo-periodo-symbol" class="
bodycopy-l
">€/mes</div>
</li>
</ul>
<ul class="tin-item">
<li class="withTooltip">
<div class="
bodycopy-m
">
TIN
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="
bodycopy-m
" id="tin-cifra">
4,75%
</div>
</li>
</ul>
</li>
<li class="card-result-payment__item " id="resto-amortizacion">
<div class="title-with-tooltip"><span class="bodycopy-m">Los 15 siguientes años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment__item-number">
<li><span class="title-l
">Euribor + 1,95</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li>
<div id="resultado-cuota-resto-amortizacion-cifra-symbol" class="
bodycopy-l
">%</div>
</li>
</ul>
</li>
</ul>
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li class="withTooltip">
<div class="
bodycopy-m
">
TAE Variable
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tae" class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<h4 class="
title-s
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</li>
<li>
<p id="tae-cifra" class="
title-xl
">4,85</p>
<span class="bodycopy-m">%</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</li>
<li class="card-result-payment__financing">
<div class="
bodycopy-m
">
Te financiamos
</div>
<div class="
bodycopy-m
">
132.800 €
</div>
</li>
<li class="tin-tae-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Consulta condiciones</span>
<svg class="icon icon-16_chevron-right icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</li>
</ul>
</div>
<ul class="card-result-payment__additional">
<li class="tit">
<div class="
bodycopy-m
">
Desglose de impuestos y gastos
</div>
<a class="link
link_inline
" href="#">
<span>Ver detalle</span>
</a>
</li>
<li>
<ul>
<li><label class="label-m" for="">ahorro aportado</label>
</li>
<li>
<div class="
bodycopy-m
" id="ahorro-aportado">
33.800€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">IMPUESTO Y GASTOS</label>
</li>
<li>
<div class="
bodycopy-m
" id="impuestos-gastos">
14.300€
</div>
</li>
</ul>
</li>
<li>
<ul>
<li><label class="label-m" for="">En total, necesitas tener ahorrado</label>
</li>
<li>
<div class="
bodycopy-m
" id="total-ahorrado">
48.100€
</div>
</li>
</ul>
</li>
</ul>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Solicita tu estudio personalizado
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-result-payment-swiper{{#if isScroll}} scroll{{/if}}">
{{#if menu-tab}}
<div class="card-result-payment__nav-tabs">
{{> @title title-tabs }}
{{> @menu-tab menu-tab }}
</div>
{{/if}}
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each card-item}}
<div
class="card-result-payment swiper-slide{{#if isError}} error{{/if}}{{#if isScroll}} scroll{{/if}}">
{{#if isError}}
{{ render '@icon--56-alert' }}
<div class="card-result-payment__title">
{{> @title title }}
</div>
{{#if subtitle}}
{{> @bodycopy-s subtitle }}
{{/if}}
{{else}}
<div class="card-result-payment__head">
<div class="card-result-payment__title">
{{#if img-title}}
<span class="wrap-img"><img src="{{ img-title }}"
alt="{{ alt-img-title }}"></span>
{{/if}}
{{#if icon}}
{{> @icon icon }}
{{/if}}
{{#if isScroll}}
{{> @title title }}
{{else}}
{{> @title title }}
{{/if}}
</div>
</div>
{{/if}}
{{#if title-radio-group}}
<div class="card-result-payment__form-radio-group">
{{> @bodycopy title-radio-group }}
{{#if form-radio-group}}
{{> @form-radio-group form-radio-group }}
{{/if}}
</div>
{{/if}}
{{#if isError}}
<ul>
{{#each item-error}}
<li>{{> @bodycopy-m txt-error }}</li>
{{/each}}
</ul>
{{else}}
{{#if item}}
<div class="wrap-items">
<ul class="items">
{{#each item}}
<li class="card-result-payment__item {{extraClass}}" id="{{id}}">
{{#if isScroll}}
{{#if number-item}}
<ul class="card-result-payment__item-number-scroll">
<li>{{> @title number-item }}
{{#if number-item-symbol}}{{> @caption number-item-symbol }}{{/if}}
{{#if number-item-symbol2}}{{> @caption number-item-symbol2 }}{{/if}}</li>
{{#if title-item}}<li class="title-with-tooltip">{{> @caption title-item }}</li>{{/if}}
</ul>
{{/if}}
{{else}}
{{#if title-item}}
<div class="title-with-tooltip">{{> @bodycopy title-item }}{{#if tooltip-title}}{{> @tooltip
tooltip-title}}{{/if}}
</div>
{{/if}}
{{#if number-item}}
<ul class="card-result-payment__item-number">
<li>{{> @title number-item }}</li>
{{#if number-item-symbol}}<li>{{> @bodycopy-l number-item-symbol }}</li>{{/if}}
{{#if number-item-symbol2}}<li>{{> @bodycopy-xs number-item-symbol2 }}</li>{{/if}}
</ul>
{{#if tin-item-number}}
<ul class="tin-item">
<li class="withTooltip">{{> @bodycopy-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{> @bodycopy-m tin-item-number}}</li>
</ul>
{{/if}}
{{/if}}
{{/if}}
{{#if text-clarification}}
<ul class="card-result-payment__item-clarification">
{{#if number-clarification}}<li>{{> @bodycopy-m number-clarification }}</li>
<li>{{> @title-s symbol-clarification }}</li>{{/if}}
<li>{{> @bodycopy-xs text-clarification }}</li>
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{#if tae-item-number}}
<ul class="card-result-payment__tae">
<li class="tae">
<ul>
<li{{#if isScroll}}{{else}} class="withTooltip"{{/if}}>{{#if isScroll}}{{> @caption tae-item-text }}{{else}}{{> @bodycopy-m tae-item-text
}}{{/if}}{{#if tae-tooltip}}{{> @tooltip tae-tooltip }}{{/if}}</li>
<li>{{#if isScroll}}{{> @caption tae-item-number }}{{else}}{{> @title-xl tae-item-number
}}{{> @bodycopy tae-item-number-symbol}}{{/if}}</li>
</ul>
</li>
{{#if tin-item-number}}
<li>
<ul>
<li{{#if isScroll}}{{else}} class="withTooltip"{{/if}}>{{#if isScroll}}{{> @caption tin-item-text }}{{else}}{{> @label-m tin-item-text
}}{{/if}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
<li>{{#if isScroll}}{{> @caption tin-item-number }}{{else}}{{> @bodycopy-m tin-item-number
}}{{/if}}</li>
</ul>
</li>
{{/if}}
{{#if euribor-item-number}}
<li>
<ul>
<li>{{> @label-m euribor-item-text }}</li>
<li>{{> @bodycopy-m euribor-item-number }}</li>
</ul>
</li>
{{/if}}
{{#if teFinanciamos}}
<li class="card-result-payment__financing">
{{> @bodycopy-m teFinanciamosText }}
{{> @bodycopy-m teFinanciamos }}
</li>
{{/if}}
{{#if tin-tae-link}}
<li class="tin-tae-link">
{{> @link tin-tae-link }}</li>
{{/if}}
</ul>
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if additional-item}}
<ul class="card-result-payment__additional">
{{#if additional-item-tit}}
<li class="tit">{{> @bodycopy-m additional-item-tit }}{{> @link additional-item-tit-link }}</li>
{{/if}}
{{#each additional-item}}
<li>
<ul>
<li>{{> @label-m additional-item-text }}</li>
{{#if tooltip}}<li>{{> @tooltip tooltip }}</li>{{/if}}
<li>{{> @bodycopy-m additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if additional-item2}}
<ul class="card-result-payment__additional2">
<li>{{> @label-m additional-item2-tit }}</li>
{{#each additional-item2}}
<li>
<ul>
<li>{{> @label-m additional-item-text }}</li>
{{#if tooltip}}<li>{{> @tooltip tooltip }}</li>{{/if}}
<li>{{> @bodycopy-m additional-item-number }}</li>
</ul>
</li>
{{/each}}
</ul>
{{/if}}
{{#if btn}}
<div class="wrap-btn">
{{> @btn btn }}
{{#if download-link}}
{{> @link download-link }}
{{/if}}
</div>
{{/if}}
{{#if isScroll}}
{{#if link-detalle}}
<div class="wrap-link-detalle">
{{> @link link-detalle }}
</div>
{{/if}}
{{/if}}
</div>
{{/each}}
</div>
{{#if isPagination}}
<div class="card-result-payment__nav between-xs center-ms">
<div class="swiper-button-prev{{#if isScroll}} scroll{{/if}}">
{{ render '@icon--32_arrow-left' }}
</div>
<div class="swiper-button-next{{#if isScroll}} scroll{{/if}}">
{{ render '@icon--32_arrow-right' }}
</div>
</div>
{{/if}}
</div>
</div>
{
"title-tabs": {
"type": "-m",
"text": "Elige la hipoteca que más va contigo."
},
"menu-tab": {
"isNoSplitter": true,
"hasMenuTabContent": false,
"menuTab": [
{
"idItem": "tab-1",
"hasIcon": false,
"state": "active",
"labelCta": {
"type": "-call-to-action",
"text": "Fija"
}
},
{
"idItem": "tab-2",
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Mixta"
}
},
{
"idItem": "tab-3",
"hasIcon": false,
"state": "inactive",
"labelCta": {
"type": "-call-to-action",
"text": "Variable"
}
}
]
},
"card-item": [
{
"img-title": "/dist/images/tipofijo.svg",
"title-radio-group": {
"text": "Desde 10 a 30 años a tipo de interés fijo",
"type": "-m"
},
"title": {
"text": "Hipoteca Fija",
"type": "-l"
},
"subtitle": {
"text": "Tu hipoteca desde 10 a 30 años a tipo de interés fijo"
},
"item": [
{
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-m",
"text": "Los 30 años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "772,14",
"type": "-xl"
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"tin-item-text": {
"text": "TIN"
},
"tin-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"teFinanciamosText": {
"text": "Te financiamos"
},
"teFinanciamos": {
"text": "132.800 €"
},
"tae-item-text": {
"text": "TAE"
},
"tae-tooltip": {
"id": "tooltip-tae",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85",
"isP": true
},
"tae-item-number-symbol": {
"id": "tae-cifra-symbol",
"text": "%",
"type": "-m"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"additional-item-tit": {
"text": "Desglose de impuestos y gastos"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"additional-item": [
{
"additional-item-text": {
"text": "ahorro aportado"
},
"additional-item-number": {
"id": "ahorro-aportado",
"text": "33.800€"
}
},
{
"additional-item-text": {
"text": "IMPUESTO Y GASTOS"
},
"additional-item-number": {
"id": "impuestos-gastos",
"text": "14.300€"
}
},
{
"additional-item-text": {
"text": "En total, necesitas tener ahorrado"
},
"additional-item-number": {
"id": "total-ahorrado",
"text": "48.100€"
}
}
],
"btn": {
"text": "Solicita tu estudio personalizado",
"href": "#"
}
},
{
"img-title": "/dist/images/tipomixto.svg",
"title-radio-group": {
"text": "A tipo de interés fijo... Los restantes a tipo variable",
"type": "-m"
},
"title": {
"text": "Hipoteca Mixta",
"type": "-l"
},
"subtitle": {
"text": "De 5 a 15 años a tipo de interés fijo. Los restantes a variable hasta 30 años"
},
"item": [
{
"id": "periodo-gracia",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-periodo-gracia-title",
"type": "-m",
"text": "Los 10 primeros años"
},
"number-item": {
"id": "resultado-cuota-periodo-gracia-cifra",
"isP": true,
"text": "734,35",
"type": "-xl"
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"tin-item-text": {
"text": "TIN"
},
"tin-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
},
{
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-m",
"text": "Los 15 siguientes años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "Euribor + 1,95",
"type": "-l"
},
"number-item-symbol": {
"id": "resultado-cuota-resto-amortizacion-cifra-symbol",
"text": "%"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"form-radio-group": {
"field-top": false,
"id": "anhos",
"radio-group": {
"radio-group": [
{
"id": "anhos5",
"title": "anhos5",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "5 años"
}
},
{
"id": "anhos10",
"title": "anhos10",
"name": "anhos",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-m",
"text": "10 años"
}
},
{
"id": "anhos15",
"title": "anhos15",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "15 años"
}
}
]
},
"field-bottom": false
},
"teFinanciamosText": {
"text": "Te financiamos"
},
"teFinanciamos": {
"text": "132.800 €"
},
"tae-item-text": {
"text": "TAE Variable"
},
"tae-tooltip": {
"id": "tooltip-tae",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85",
"isP": true
},
"tae-item-number-symbol": {
"id": "tae-cifra-symbol",
"text": "%",
"type": "-m"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"additional-item-tit": {
"text": "Desglose de impuestos y gastos"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"additional-item": [
{
"additional-item-text": {
"text": "ahorro aportado"
},
"additional-item-number": {
"id": "ahorro-aportado",
"text": "33.800€"
}
},
{
"additional-item-text": {
"text": "IMPUESTO Y GASTOS"
},
"additional-item-number": {
"id": "impuestos-gastos",
"text": "14.300€"
}
},
{
"additional-item-text": {
"text": "En total, necesitas tener ahorrado"
},
"additional-item-number": {
"id": "total-ahorrado",
"text": "48.100€"
}
}
],
"btn": {
"text": "Solicita tu estudio personalizado",
"href": "#"
}
},
{
"img-title": "/dist/images/variable.svg",
"title-radio-group": {
"text": "1 año a tipo fijo. El resto a variable hasta 30 años",
"type": "-m"
},
"title": {
"text": "Hipoteca Variable",
"type": "-l"
},
"subtitle": {
"text": "Hasta 2 años a tipo de interés fijo y los restantes, variable hasta 30 años"
},
"item": [
{
"id": "periodo-gracia",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-periodo-gracia-title",
"type": "-m",
"text": "Los 10 primeros años"
},
"number-item": {
"id": "resultado-cuota-periodo-gracia-cifra",
"isP": true,
"text": "734,35",
"type": "-xl"
},
"number-item-symbol": {
"id": "resultado-cuota-segundo-periodo-symbol",
"text": "€/mes"
},
"number-item-symbol2": false,
"tin-item-text": {
"text": "TIN"
},
"tin-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tin-item-number": {
"id": "tin-cifra",
"text": "4,75%"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
},
{
"id": "resto-amortizacion",
"extraClass": "",
"title-item": {
"id": "resultado-cuota-resto-title",
"type": "-m",
"text": "Los 15 siguientes años"
},
"number-item": {
"id": "resultado-cuota-resto-amortizacion-cifra",
"isP": true,
"text": "Euribor + 1,95",
"type": "-l"
},
"number-item-symbol": {
"id": "resultado-cuota-resto-amortizacion-cifra-symbol",
"text": "%"
},
"number-item-symbol2": false,
"number-clarification": false,
"symbol-clarification": false,
"text-clarification": false
}
],
"teFinanciamosText": {
"text": "Te financiamos"
},
"teFinanciamos": {
"text": "132.800 €"
},
"tae-item-text": {
"text": "TAE Variable"
},
"tae-tooltip": {
"id": "tooltip-tae",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"tae-item-number": {
"id": "tae-cifra",
"text": "4,85",
"isP": true
},
"tae-item-number-symbol": {
"id": "tae-cifra-symbol",
"text": "%",
"type": "-m"
},
"tin-tae-link": {
"href": "#",
"text": "Consulta condiciones",
"icon-after": {
"name": "16_chevron-right",
"isBefore": true
}
},
"additional-item-tit": {
"text": "Desglose de impuestos y gastos"
},
"additional-item-tit-link": {
"href": "#",
"text": "Ver detalle",
"isInline": true
},
"additional-item": [
{
"additional-item-text": {
"text": "ahorro aportado"
},
"additional-item-number": {
"id": "ahorro-aportado",
"text": "33.800€"
}
},
{
"additional-item-text": {
"text": "IMPUESTO Y GASTOS"
},
"additional-item-number": {
"id": "impuestos-gastos",
"text": "14.300€"
}
},
{
"additional-item-text": {
"text": "En total, necesitas tener ahorrado"
},
"additional-item-number": {
"id": "total-ahorrado",
"text": "48.100€"
}
}
],
"btn": {
"text": "Solicita tu estudio personalizado",
"href": "#"
}
}
]
}
.card-result-payment {
display: flex;
flex-direction: column;
opacity: 1;
transition: opacity 0.3s ease-in-out;
background-color: var(--color-tertiary-brand);
padding: 32px;
@media (--viewport-sm-max) {
padding: 32px 16px;
}
&__title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
margin-bottom: 16px;
}
}
&__head {
background-color: var(--color-background-accent-bold);
margin: -32px -32px 32px;
padding: 32px;
@media (--viewport-sm-max) {
margin: -32px -16px 32px;
}
.title-l {
color: var(--color-text-inverse);
}
.label {
color: var(--color-text-inverse);
margin-bottom: 0;
}
img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(309deg) brightness(107%) contrast(99%);
}
&+.bodycopy-s {
text-align: center;
min-height: 46px;
}
}
&__form-radio-group {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 72px;
gap: 16px;
margin-bottom: 32px;
@media (--viewport-sm-max) {
height: 96px;
}
.bodycopy-m {
text-align: center;
}
.form-radio-group {
display: flex;
justify-content: center;
margin-bottom: 0;
.field-top {
display: none;
}
ul {
.radio-group__item {
margin-right: 16px;
&:last-child {
margin-right: 0;
}
}
}
}
}
&__financing {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px 0 0;
.bodycopy-m {
color: var(--color-text-accent);
}
}
.wrap-items {
height: 438px;
position: relative;
}
ul.items {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*@media (--viewport-ms-max) {
height: 168px;
}*/
.title-xl {
color: var(--color-text-primary);
}
/*.title-with-tooltip {
display: block;
text-align: center;
margin: 0 10% 16px;
.title-s {
display: inline;
}
.tooltip {
top: 22px;
right: 0;
left: 8px;
display: inline;
}
}*/
li {
width: 100%;
text-align: center;
/*&:last-child {
margin-bottom: 4px;
}*/
.title-with-tooltip {
margin-bottom: 4px;
}
li {
margin-top: 0;
width: auto;
&:last-child {
margin-bottom: 0;
}
}
}
ul.tin-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 24px;
li {
line-height: normal;
&.withTooltip {
display: flex;
align-items: center;
}
.tooltip {
top: -8px;
right: -8px;
}
}
}
.card-result-payment__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 24px;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-s {
padding-bottom: 11px;
}
.title-l {
color: var(--color-text);
}
}
}
}
&__item-clarification {
display: flex;
align-items: center;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
}
}
&__tae {
display: flex;
flex-direction: column;
padding: 0;
li.tin-tae-link {
position: absolute;
bottom: 16px;
justify-content: center;
display: flex;
width: 100%;
.icon {
fill: var(--new-color-text);
top: 3px;
right: -5px;
}
}
li.tae {
.bodycopy-m,
.title-xl {
color: var(--color-text-error);
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
display: flex;
line-height: normal;
align-items: flex-end;
.bodycopy-m:last-child {
position: relative;
top: -10px;
margin-left: 4px;
}
&.withTooltip {
align-items: center;
.tooltip {
top: -8px;
right: -8px;
}
}
}
}
}
&__additional {
display: flex;
flex-direction: column;
border-top: solid 1px var(--color-border);
border-bottom: solid 1px var(--color-border);
margin-top: 32px;
margin-bottom: 16px;
li.tit {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 16px 0;
align-items: center;
.link_inline {
color: var(--color-text-link-secondary);
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
margin-bottom: 12px;
line-height: normal;
&:last-of-type {
white-space: nowrap;
}
@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}
}
}
}
.btn {
float: left;
margin-top: 30px;
align-self: start;
}
.wrap-img {
height: 37px;
display: flex;
align-items: center;
}
&.error {
justify-content: center;
text-align: center;
padding: 56px 32px;
align-items: center;
background-color: var(--color-background-accent);
@media (--viewport-ms-max) {
padding: 40px 60px;
}
@media (--viewport-xs-max) {
padding: 40px;
}
.title-m {
margin-bottom: 32px;
}
.icon {
width: 40px;
height: 40px;
margin-bottom: 32px;
}
}
&.fade-out {
opacity: .5;
}
&__item {
text-align: center;
&+.card-result-payment__item {
/*margin-top: 24px;*/
}
.title-xl,
.title-m {
color: var(--color-text-primary);
}
.title-with-tooltip {
display: block;
text-align: center;
margin: 0 10% 16px;
.title-s {
display: inline;
}
.tooltip {
top: 22px;
right: 0;
left: 8px;
display: inline;
}
}
}
&__item-number {
display: flex;
align-items: flex-end;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
.bodycopy-xs {
padding-bottom: 13px;
}
.title-m {
padding-bottom: 9px;
color: var(--color-text-primary);
}
.bodycopy-l {
padding-bottom: 9px;
}
@media (--viewport-md-max) {
.bodycopy-xs {
padding-bottom: 10px;
}
.bodycopy-l {
padding-bottom: 6px;
}
.title-m {
padding-bottom: 4px;
}
}
@media (--viewport-sm-max) {
.bodycopy-xs {
padding-bottom: 7px;
}
.bodycopy-l {
padding-bottom: 3px;
}
.title-m {
padding-bottom: 3px;
}
}
@media (--viewport-ms-max) {
.bodycopy-xs {
padding-bottom: 11px;
}
.bodycopy-l {
padding-bottom: 6px;
}
.title-m {
padding-bottom: 6px;
}
}
@media (--viewport-xs-max) {
.bodycopy-xs {
padding-bottom: 8px;
}
.bodycopy-l {
padding-bottom: 3px;
}
.title-m {
padding-bottom: 4px;
}
}
}
&:nth-of-type(2) {
background-color: aqua;
li:last-of-type {
.bodycopy-l {
padding-bottom: 3px;
}
}
}
}
&__item+.card-result-payment__item {
ul.card-result-payment__item-number {
li+li {
.bodycopy-l {
padding-bottom: 3px;
}
}
}
}
&__item-clarification {
display: flex;
align-items: center;
justify-content: center;
li {
padding: 0 3px;
line-height: normal;
.title-s {
padding-bottom: -3px;
color: var(--color-text-primary);
}
.bodycopy-xs {
margin-bottom: -3px;
}
}
}
&__additional2 {
display: flex;
flex-direction: column;
margin-bottom: 20px;
border-top: solid 1px var(--color-secondary-brand);
padding: 20px 0 0;
li {
&:first-of-type {
margin-bottom: 20px;
.label-m {
color: var(--color-text-subtle);
}
}
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
li {
margin-bottom: 20px;
line-height: normal;
&:last-of-type {
white-space: nowrap;
}
&:first-of-type {
margin-bottom: 20px;
.label-m {
color: initial;
}
}
@media (--viewport-xs-max) {
&:first-of-type {
max-width: 40%;
}
}
}
.tooltip {
left: 0;
top: -6px;
margin-right: 20px;
}
}
}
&.fade-out {
opacity: .5;
}
&__nav {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
padding: 0 20px;
}
&-back,
&-forward {
margin-top: 30px;
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
.wrap-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
.icon {
fill: var(--color-icon);
}
}
/* Swiper Variation*/
&-swiper {
position: sticky;
top: 0;
}
&-swiper.scroll {
position: fixed;
width: 100%;
/*bottom: -64px;
left: 20px;*/
bottom: -64px;
left: 0;
top: initial;
z-index: 12;
}
&.swiper-slide {
position: relative;
padding: 32px;
@media (--viewport-sm-max) {
padding: 32px 16px;
}
}
&.swiper-slide.scroll {
ul.items {
height: 72px;
}
@media (--viewport-ms-max) {
padding: 32px 20px 24px;
}
.card-result-payment__head {
background-color: unset;
margin: 0;
padding: 0 20px 16px;
.title-l {
color: var(--color-text-accent);
}
.icon {
fill: var(--color-icon-accent);
margin-bottom: 16px;
}
&+.bodycopy-s {
text-align: center;
min-height: 46px;
}
}
.wrap-items {
height: 108px;
justify-content: flex-start;
ul.items {
height: 56px;
}
}
.card-result-payment__item+.card-result-payment__item {
margin-top: 8px;
margin-bottom: 0;
}
.card-result-payment__item-number-scroll {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 0 32px 8px;
@media (--viewport-xxs-max) {
padding: 0 0 8px;
}
&:last-of-type {
padding-bottom: 0;
}
li {
display: flex;
flex-direction: row;
align-items: flex-end;
margin: 0;
gap: 8px;
p.title-m {
/*line-height: 20px;*/
color: var(--color-text);
margin-right: 8px;
}
}
}
.card-result-payment__tae {
width: 100%;
height: auto;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 0;
margin: 12px 0 0;
align-self: flex-end;
justify-content: center;
li {
width: 50%;
ul {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 4px;
li {
width: auto;
margin-bottom: 0;
padding: 0 2px;
}
}
&.tae {
ul {
justify-content: flex-end;
border-right: solid 1px var(--color-text);
.caption-label {
color: var(--color-text-error);
}
}
}
&.tin-tae-link {
position: relative;
bottom: auto;
flex: none;
width: 100%;
margin-bottom: 0;
.link {
color: var(--color-text-link-secondary);
span {
text-decoration: underline;
}
}
}
}
}
.wrap-btn {
justify-content: center;
padding-top: 8px;
padding-bottom: 32px;
flex-direction: row;
align-items: unset;
gap: unset;
.btn {
margin-top: 0
}
}
.wrap-link-detalle {
border-top: solid 1px var(--color-secondary-brand);
display: flex;
justify-content: center;
padding-top: 16px;
.icon {
fill: var(--color-icon);
}
}
}
@media (--viewport-ms-max) {
.swiper-wrapper {
padding-left: 10px;
}
}
.swiper-container {
padding-bottom: 50px;
@media (--viewport-ms-max) {
padding-bottom: 40px;
}
}
.swiper-slide {
/*background-color:var(--color-accent-light);*/
height: auto;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
&__nav {
display: flex;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding: 24px 20px 0;
justify-content: center;
align-items: center;
.swiper-pagination {
margin: 0 40px;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 60px;
&::after {
display: none;
}
.icon {
fill: var(--color-icon-inverse)
}
&.scroll {
top: 22px;
.icon {
fill: var(--color-icon-accent)
}
}
&.inactive {
.icon {
fill: var(--color-icon-link-primary-disabled)
}
}
}
.swiper-button-prev {
margin-top: 0;
left: 32px;
&.scroll {
left: 20px;
}
}
.swiper-button-next {
margin-top: 0;
right: 32px;
&.scroll {
right: 20px;
}
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
@media (--viewport-ms-max) {
display: flex;
}
&-tabs {
.menu-tab {
margin: 40px 0;
&-scroller__scroll-content {
width: 100%;
.menu-tab-item {
width: 33.3%;
}
}
}
.title-m {
text-align: center;
display: block;
}
}
}
}
No notes defined.