File: /var/www/quadcode.com/src/components/blocks/white-label-binary-options/Features.svelte
<script lang="ts">
import { t, locale } from '$lib/translations';
import feature1 from '../../../assets/images/white-label-binary-options/feature1.webp';
import feature1_2x from '../../../assets/images/white-label-binary-options/feature1@2x.webp';
import feature1deskL from '../../../assets/images/white-label-binary-options/feature1deskL.webp';
import feature1deskL_2x from '../../../assets/images/white-label-binary-options/feature1deskL@2x.webp';
import feature1tabL from '../../../assets/images/white-label-binary-options/feature1tabL.webp';
import feature1tabL_2x from '../../../assets/images/white-label-binary-options/feature1tabL@2x.webp';
import feature1tabM from '../../../assets/images/white-label-binary-options/feature1tabM.webp';
import feature1tabM_2x from '../../../assets/images/white-label-binary-options/feature1tabM@2x.webp';
import feature2 from '../../../assets/images/white-label-binary-options/feature2.webp';
import feature3 from '../../../assets/images/white-label-binary-options/feature3.webp';
import feature3_2x from '../../../assets/images/white-label-binary-options/feature3@2x.webp';
import feature3Tab from '../../../assets/images/white-label-binary-options/feature3Tab.webp';
import feature3Tab_2x from '../../../assets/images/white-label-binary-options/feature3Tab@2x.webp';
import feature3Mob from '../../../assets/images/white-label-binary-options/feature3Mob.webp';
import feature3Mob_2x from '../../../assets/images/white-label-binary-options/feature3Mob@2x.webp';
</script>
<section class="affiliate_broker__features block-features {$locale !== 'en' ? 'locale' : ''} {$locale}">
<div class="container">
<div class="block-features__wrapper">
<div class="block-features__text">
<div class="block-features__titleBlock">
<p class="block-features__aboveTitle underTitle" >{$t('white-label-binary-options.Features')}</p>
<h2 class="block-features__title ">
{@html $t('white-label-binary-options.Better Product, Higher Conversion')}
</h2>
</div>
</div>
<div class="block-features__cards">
<div class="block-features__card" id="blockFeature1" >
<div class="block-features__cardText">
<div class="block-features__cardTitle" >{$t('white-label-binary-options.Exciting trading experience')}</div>
<p class="block-features__cardDescription" >{$t('white-label-binary-options.Binary options deliver a dynamic and fast-paced trading environment, perfectly tailored to match your audience\'s preferences and interests.')}</p>
<picture>
<source srcset="{feature1tabM} 1x, {feature1tabM_2x} 2x" media="(max-width: 767px)" >
<source srcset="{feature1tabL} 1x, {feature1tabL_2x} 2x" media="(max-width: 1024px)" >
<source srcset="{feature1deskL} 1x, {feature1deskL_2x} 2x" media="(max-width: 1799px)" >
<img src="{feature1}" srcset="{feature1} 1x, {feature1_2x} 2x" loading="lazy" alt="Exciting trading experience">
</picture>
</div>
</div>
<div class="block-features__cardColumn" >
<div class="block-features__card" id="blockFeature2">
<div class="block-features__cardText">
<div class="block-features__cardTitle">{$t('white-label-binary-options.Affiliate module')} </div>
<div class="block-features__cardDescription">{$t('white-label-binary-options.Maximize your revenue with built-in affiliate module')}</div>
<ul class="block-features__cardList">
<li class="block-features__cardListItem">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.7188 12.283C29.4288 15.993 29.4288 22.0081 25.7188 25.7181M12.2838 25.718C8.57381 22.008 8.57381 15.993 12.2838 12.283M7.80544 30.1964C1.62214 24.0131 1.62214 13.988 7.80544 7.80469M30.1972 7.80476C36.3805 13.9881 36.3805 24.0132 30.1972 30.1965M22.168 19.0005C22.168 20.7494 20.7502 22.1672 19.0013 22.1672C17.2524 22.1672 15.8346 20.7494 15.8346 19.0005C15.8346 17.2516 17.2524 15.8339 19.0013 15.8339C20.7502 15.8339 22.168 17.2516 22.168 19.0005Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('white-label-binary-options.IB Module')}
</li>
<li class="block-features__cardListItem">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.668 12.666H12.6838M7.22564 4.65001L4.65196 7.22369C4.10428 7.77137 3.83044 8.04521 3.63461 8.36478C3.46098 8.64811 3.33304 8.957 3.25546 9.28011C3.16797 9.64456 3.16797 10.0318 3.16797 10.8064L3.16797 15.3173C3.16797 16.0919 3.16797 16.4791 3.25546 16.8436C3.33304 17.1667 3.46098 17.4756 3.63461 17.7589C3.83044 18.0785 4.10428 18.3523 4.65196 18.9L16.794 31.042C18.675 32.9231 19.6156 33.8636 20.7001 34.216C21.6541 34.526 22.6818 34.526 23.6358 34.216C24.7204 33.8636 25.6609 32.9231 27.542 31.042L31.0439 27.54C32.925 25.6589 33.8656 24.7184 34.218 23.6338C34.5279 22.6798 34.5279 21.6522 34.218 20.6982C33.8656 19.6136 32.925 18.6731 31.0439 16.792L18.902 4.65001C18.3543 4.10233 18.0804 3.82849 17.7609 3.63266C17.4775 3.45903 17.1686 3.33109 16.8455 3.25351C16.4811 3.16602 16.0938 3.16602 15.3193 3.16602L10.8083 3.16602C10.0338 3.16602 9.64651 3.16602 9.28207 3.25351C8.95895 3.33108 8.65006 3.45903 8.36673 3.63265C8.04716 3.82849 7.77332 4.10233 7.22564 4.65001ZM13.4596 12.666C13.4596 13.1032 13.1052 13.4577 12.668 13.4577C12.2307 13.4577 11.8763 13.1032 11.8763 12.666C11.8763 12.2288 12.2307 11.8743 12.668 11.8743C13.1052 11.8743 13.4596 12.2288 13.4596 12.666Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('white-label-binary-options.CPA')}
</li>
<li class="block-features__cardListItem">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.668 25.3327V29.766C12.668 31.5395 12.668 32.4263 13.0131 33.1037C13.3167 33.6995 13.8012 34.1839 14.397 34.4875C15.0744 34.8327 15.9611 34.8327 17.7346 34.8327H29.768C31.5415 34.8327 32.4282 34.8327 33.1056 34.4875C33.7015 34.1839 34.1859 33.6995 34.4895 33.1037C34.8346 32.4263 34.8346 31.5395 34.8346 29.766V17.7327C34.8346 15.9592 34.8346 15.0724 34.4895 14.395C34.1859 13.7992 33.7015 13.3148 33.1056 13.0112C32.4282 12.666 31.5415 12.666 29.768 12.666H25.3346M8.23463 25.3327H20.268C22.0415 25.3327 22.9282 25.3327 23.6056 24.9875C24.2015 24.6839 24.6859 24.1995 24.9895 23.6037C25.3346 22.9263 25.3346 22.0395 25.3346 20.266V8.23268C25.3346 6.45918 25.3346 5.57243 24.9895 4.89505C24.6859 4.2992 24.2015 3.81476 23.6056 3.51116C22.9282 3.16602 22.0415 3.16602 20.268 3.16602H8.23464C6.46114 3.16602 5.57439 3.16602 4.897 3.51116C4.30115 3.81476 3.81671 4.2992 3.51311 4.89505C3.16797 5.57243 3.16797 6.45918 3.16797 8.23268V20.266C3.16797 22.0395 3.16797 22.9263 3.51311 23.6037C3.81671 24.1995 4.30115 24.6839 4.897 24.9875C5.57439 25.3327 6.46114 25.3327 8.23463 25.3327Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('white-label-binary-options.RevShare')}
</li>
</ul>
</div>
<img src={feature2} loading="lazy" alt="mobile">
</div>
<div class="block-features__card" id="blockFeature3">
<div class="block-features__cardText">
<div class="block-features__cardTitle">{@html $t('white-label-binary-options.Back office')}</div>
<div class="block-features__cardDescription">{@html $t('white-label-binary-options.Control your brokerage with a one-stop back office solution')}</div>
<ul class="block-features__cardList">
<li class="block-features__cardListItem">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0009 21.4491C20.0466 21.4491 21.705 19.7908 21.705 17.7451C21.705 15.6994 20.0466 14.041 18.0009 14.041C15.9552 14.041 14.2969 15.6994 14.2969 17.7451C14.2969 19.7908 15.9552 21.4491 18.0009 21.4491Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27.1362 21.4497C26.9718 21.8221 26.9228 22.2352 26.9954 22.6357C27.0681 23.0362 27.259 23.4058 27.5436 23.6968L27.6177 23.7709C27.8473 24.0002 28.0294 24.2726 28.1537 24.5723C28.278 24.8721 28.3419 25.1934 28.3419 25.518C28.3419 25.8425 28.278 26.1638 28.1537 26.4636C28.0294 26.7634 27.8473 27.0357 27.6177 27.265C27.3884 27.4946 27.116 27.6768 26.8163 27.801C26.5165 27.9253 26.1951 27.9893 25.8706 27.9893C25.5461 27.9893 25.2248 27.9253 24.925 27.801C24.6252 27.6768 24.3529 27.4946 24.1236 27.265L24.0495 27.191C23.7585 26.9063 23.3889 26.7154 22.9884 26.6427C22.5878 26.5701 22.1747 26.6192 21.8023 26.7835C21.4372 26.94 21.1257 27.1999 20.9063 27.5312C20.687 27.8624 20.5692 28.2506 20.5677 28.6479V28.8578C20.5677 29.5127 20.3075 30.1408 19.8444 30.6039C19.3813 31.067 18.7532 31.3271 18.0983 31.3271C17.4434 31.3271 16.8153 31.067 16.3522 30.6039C15.8891 30.1408 15.6289 29.5127 15.6289 28.8578V28.7467C15.6194 28.338 15.4871 27.9416 15.2493 27.6091C15.0115 27.2766 14.6791 27.0234 14.2955 26.8823C13.9231 26.7179 13.51 26.6689 13.1094 26.7415C12.7089 26.8141 12.3393 27.0051 12.0483 27.2897L11.9742 27.3638C11.7449 27.5934 11.4726 27.7755 11.1728 27.8998C10.873 28.0241 10.5517 28.088 10.2272 28.088C9.90265 28.088 9.58132 28.0241 9.28154 27.8998C8.98177 27.7755 8.70942 27.5934 8.48008 27.3638C8.25049 27.1345 8.06835 26.8621 7.94408 26.5623C7.81981 26.2626 7.75585 25.9412 7.75585 25.6167C7.75585 25.2922 7.81981 24.9709 7.94408 24.6711C8.06835 24.3713 8.25049 24.099 8.48008 23.8696L8.55417 23.7956C8.83881 23.5046 9.02975 23.135 9.10237 22.7345C9.17499 22.3339 9.12597 21.9208 8.96161 21.5484C8.8051 21.1833 8.54522 20.8718 8.21397 20.6524C7.88271 20.4331 7.49454 20.3153 7.09724 20.3138H6.88734C6.23242 20.3138 5.60433 20.0536 5.14123 19.5905C4.67813 19.1274 4.41797 18.4993 4.41797 17.8444C4.41797 17.1895 4.67813 16.5614 5.14123 16.0983C5.60433 15.6352 6.23242 15.375 6.88734 15.375H6.99846C7.40714 15.3654 7.80348 15.2332 8.13598 14.9954C8.46847 14.7575 8.72173 14.4252 8.86284 14.0415C9.02719 13.6691 9.07622 13.256 9.0036 12.8555C8.93097 12.455 8.74003 12.0854 8.45539 11.7944L8.38131 11.7203C8.15172 11.491 7.96958 11.2187 7.84531 10.9189C7.72104 10.6191 7.65708 10.2978 7.65708 9.97326C7.65708 9.64875 7.72104 9.32741 7.84531 9.02764C7.96958 8.72786 8.15172 8.45552 8.38131 8.22618C8.61065 7.99659 8.88299 7.81445 9.18277 7.69018C9.48255 7.56591 9.80388 7.50194 10.1284 7.50194C10.4529 7.50194 10.7742 7.56591 11.074 7.69018C11.3738 7.81445 11.6461 7.99659 11.8755 8.22618L11.9496 8.30026C12.2405 8.5849 12.6101 8.77584 13.0107 8.84847C13.4112 8.92109 13.8243 8.87206 14.1967 8.70771H14.2955C14.6606 8.55119 14.9721 8.29132 15.1915 7.96006C15.4108 7.62881 15.5286 7.24064 15.5301 6.84333V6.63343C15.5301 5.97852 15.7903 5.35042 16.2534 4.88732C16.7165 4.42423 17.3446 4.16406 17.9995 4.16406C18.6544 4.16406 19.2825 4.42423 19.7456 4.88732C20.2087 5.35042 20.4689 5.97852 20.4689 6.63343V6.74456C20.4705 7.14186 20.5882 7.53003 20.8076 7.86129C21.0269 8.19254 21.3384 8.45242 21.7036 8.60893C22.076 8.77329 22.4891 8.82231 22.8896 8.74969C23.2901 8.67707 23.6597 8.48613 23.9507 8.20148L24.0248 8.1274C24.2541 7.89781 24.5265 7.71567 24.8262 7.5914C25.126 7.46713 25.4473 7.40317 25.7719 7.40317C26.0964 7.40317 26.4177 7.46713 26.7175 7.5914C27.0173 7.71567 27.2896 7.89781 27.5189 8.1274C27.7485 8.35674 27.9307 8.62909 28.0549 8.92886C28.1792 9.22864 28.2432 9.54997 28.2432 9.87448C28.2432 10.199 28.1792 10.5203 28.0549 10.8201C27.9307 11.1199 27.7485 11.3922 27.5189 11.6216L27.4449 11.6956C27.1602 11.9866 26.9693 12.3562 26.8967 12.7567C26.824 13.1573 26.8731 13.5704 27.0374 13.9428V14.0415C27.1939 14.4067 27.4538 14.7182 27.7851 14.9376C28.1163 15.1569 28.5045 15.2746 28.9018 15.2762H29.1117C29.7666 15.2762 30.3947 15.5364 30.8578 15.9995C31.3209 16.4626 31.5811 17.0907 31.5811 17.7456C31.5811 18.4005 31.3209 19.0286 30.8578 19.4917C30.3947 19.9548 29.7666 20.215 29.1117 20.215H29.0006C28.6033 20.2166 28.2151 20.3343 27.8838 20.5537C27.5526 20.773 27.2927 21.0845 27.1362 21.4497Z" stroke="#E62334" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
{$t('white-label-binary-options.Fully Customizable')}
</li>
<li class="block-features__cardListItem">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1375 9.56788C15.8153 9.56788 16.3648 10.1174 16.3648 10.7952V27.3633C16.3648 29.1708 14.8995 30.6361 13.092 30.6361H12.5346C10.9633 30.6361 9.61373 29.5193 9.31972 27.9757L8.46257 23.4757C8.07843 21.459 9.62449 19.5906 11.6775 19.5906H13.9102V10.7952C13.9102 10.1174 14.4597 9.56788 15.1375 9.56788ZM13.9102 22.0452H11.6775C11.1642 22.0452 10.7777 22.5122 10.8738 23.0164L11.7309 27.5164C11.8044 27.9023 12.1418 28.1815 12.5346 28.1815H13.092C13.5439 28.1815 13.9102 27.8152 13.9102 27.3633V22.0452Z" fill="#E62334"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.9716 8.22872C22.7705 8.14797 22.4164 8.14387 22.0419 8.4443C20.0051 10.0786 17.074 11.6133 12.8874 11.6133C8.89818 11.6133 7.36469 13.8276 7.3647 15.602C7.36471 17.3764 8.89825 19.5906 12.8875 19.5906C16.4548 19.5906 19.2635 20.9504 21.6312 22.7244C21.973 22.9805 22.4112 23.0089 22.7743 22.8503C23.1235 22.6977 23.3191 22.4178 23.3191 22.0651V8.85501C23.3191 8.45671 23.1399 8.29626 22.9716 8.22872ZM23.8861 5.95089C25.0083 6.40142 25.7737 7.47987 25.7737 8.85501V22.0651C25.7737 23.5279 24.8702 24.6131 23.7571 25.0995C22.6578 25.5798 21.2705 25.5212 20.1594 24.6887C18.0702 23.1234 15.7666 22.0452 12.8875 22.0452C7.87669 22.0452 4.91018 19.0435 4.91016 15.602C4.91013 12.1605 7.87661 9.15879 12.8874 9.15879C16.4065 9.15879 18.8113 7.88945 20.5058 6.52983C21.5146 5.72042 22.7968 5.51357 23.8861 5.95089Z" fill="#E62334"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6571 14C27.2689 13.5743 26.6693 13.2497 25.7738 13.2497C25.096 13.2497 24.5465 12.7002 24.5465 12.0224C24.5465 11.3446 25.096 10.7952 25.7738 10.7952C27.3328 10.7952 28.5997 11.391 29.4707 12.346C30.3231 13.2806 30.743 14.4987 30.7595 15.6872C30.776 16.8762 30.3892 18.1089 29.5324 19.0579C28.6568 20.0278 27.369 20.6133 25.7738 20.6133C25.096 20.6133 24.5465 20.0639 24.5465 19.3861C24.5465 18.7083 25.096 18.1588 25.7738 18.1588C26.7354 18.1588 27.3396 17.8239 27.7105 17.4131C28.1002 16.9814 28.3142 16.3732 28.3052 15.7213C28.2961 15.0689 28.0639 14.446 27.6571 14Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Marketing Automation')}
</li>
<li class="block-features__cardListItem">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 4.66406H29V17.0225C29 23.8096 24.4957 29.7535 18 31.6097C11.5043 29.7535 7 23.8096 7 17.0225V4.66406Z" stroke="#E62334" stroke-width="3"/>
<path d="M7.5 16.1641H28.5" stroke="#E62334" stroke-width="3" stroke-linecap="round"/>
<path d="M17.75 6.16016V30.1654" stroke="#E62334" stroke-width="3" stroke-linecap="round"/>
</svg>
{$t('white-label-binary-options.Comprehensive Security')}
</li>
<li class="block-features__cardListItem">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5962 8.38514C33.1265 8.90662 33.1357 9.76134 32.6168 10.2942L20.8223 22.4067C20.5696 22.6662 20.2236 22.8125 19.8623 22.8125C19.501 22.8125 19.1549 22.6662 18.9022 22.4067L13.6547 17.0177L5.30334 25.5942C4.78446 26.1271 3.93399 26.1363 3.40376 25.6149C2.87354 25.0934 2.86434 24.2387 3.38323 23.7058L12.6946 14.1433C12.9473 13.8838 13.2934 13.7375 13.6547 13.7375C14.016 13.7375 14.362 13.8838 14.6147 14.1433L19.8623 19.5323L30.6967 8.40578C31.2155 7.87291 32.066 7.86367 32.5962 8.38514Z" fill="#E62334"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7015 9.35C22.7015 8.60442 23.3029 8 24.0448 8H31.6567C32.3986 8 33 8.60442 33 9.35V17C33 17.7456 32.3986 18.35 31.6567 18.35C30.9148 18.35 30.3134 17.7456 30.3134 17V10.7H24.0448C23.3029 10.7 22.7015 10.0956 22.7015 9.35Z" fill="#E62334"/>
</svg>
{$t('white-label-binary-options.Powerful Analytics')}
</li>
</ul>
<picture>
<source srcset="{feature3Mob} 1x, {feature3Mob_2x} 2x" media="(max-width: 767px)">
<source srcset="{feature3Tab}, {feature3Tab_2x} 2x" media="(max-width: 1024px)">
<img src="{feature3}" srcset="{feature3} 1x, {feature3_2x} 2x" loading="lazy" alt="Back office">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style lang="scss">
@import "src/scss/variables";
@import "src/scss/media";
@import "src/scss/mixins";
.block-features{
padding-top: 92px;
padding-bottom: 134px;
overflow: hidden;
position: relative;
@include breakpoint-down('deskL') {
padding-top: 60px;
padding-bottom: 145px;
}
@include breakpoint-down('tabL') {
padding-top: 62px;
padding-bottom: 139px;
}
@include breakpoint-down('tabM') {
gap: 12px;
padding-top: 49px;
padding-bottom: 103px;
}
&__wrapper {
display: flex;
flex-direction: column;
gap: 73px;
@include breakpoint-down('deskL') {
gap: 23px;
}
@include breakpoint-down('deskS') {
gap: 32px;
}
@include breakpoint-down('tabM') {
gap: 26px;
}
}
&__aboveTitle {
color: $redPrimary;
@include H4;
margin-bottom: 12px;
@include breakpoint-down('deskL') {
@include H3;
margin-bottom: 8px;
}
@include breakpoint-down('tabL') {
text-align: center;
}
@include breakpoint-down('tabM') {
margin-bottom: 4px;
}
}
&__title {
@include H1;
@include breakpoint-down('tabL') {
text-align: center;
}
:global(span) {
color: $redPrimary;
}
}
&__cards {
display: flex;
gap: 33px;
@include breakpoint-down('deskS') {
gap: 18px;
}
@include breakpoint-down('tabL') {
gap: 16px;
flex-direction: column;
align-items: center;
}
}
&__cardColumn {
display: flex;
flex-direction: column;
gap: 33px;
flex: 1;
@include breakpoint-down('deskL') {
gap: 20px;
}
@include breakpoint-down('tabL') {
gap: 16px;
flex-direction: row;
}
@include breakpoint-down('tabM') {
flex-direction: column;
}
}
&__card {
border: 2px solid $redPrimary;
background-color: $techWhite;
color: #141414;
padding: 60px;
border-radius: 30px;
overflow: hidden;
position: relative;
height: 100%;
@include breakpoint-down('deskL') {
padding: 40px;
border-radius: 20px;
}
@include breakpoint-down('deskS') {
padding: 21px;
border-radius: 16px;
flex-direction: column;
}
@include breakpoint-down('tabL') {
padding: 36px;
width: 336px;
height: 412px;
}
@include breakpoint-down('tabM') {
padding: 34px 36px;
}
}
&__cardText {
width: 314px;
}
&__cardTitle {
@include H2;
text-wrap: nowrap;
margin-bottom: 18px;
@include breakpoint-down('deskL') {
margin-bottom: 8px;
}
:global(span) {
color: $redPrimary;
}
}
&__cardDescription {
@include body;
margin-bottom: 24px;
@include breakpoint-down('deskL') {
margin-bottom: 15px;
}
@include breakpoint-down('tabL') {
@include subtext;
margin-bottom: 8px;
}
}
&__cardList {
@include H4;
display: flex;
flex-direction: column;
gap: 8px;
@include breakpoint-down('deskL') {
@include H3;
gap: 4px;
margin-bottom: 1px;
}
@include breakpoint-down('deskS') {
@include body;
font-weight: 700;
}
svg {
min-width: 36px;
min-height: 36px;
max-width: 36px;
max-height: 36px;
@include breakpoint-down('deskL') {
min-width: 30px;
min-height: 30px;
max-width: 30px;
max-height: 30px;
}
@include breakpoint-down('tabL') {
min-width: 20px;
min-height: 20px;
max-width: 20px;
max-height: 20px;
}
}
}
&__cardListItem {
display: flex;
gap: 12px;
align-items: center;
}
#blockFeature1 {
background-color: $redPrimary;
min-width: 567px;
max-width: 567px;
min-height: 923px;
position: relative;
border-color: $techWhite;
color: $techWhite;
padding: 60px 48px;
@include breakpoint-down('deskL') {
min-width: 490px;
max-width: 490px;
min-height: 594px;
padding: 40px;
}
@include breakpoint-down('deskS') {
min-width: 400px;
max-width: 400px;
}
@include breakpoint-down('tabL') {
min-width: 688px;
max-width: 688px;
min-height: 156px;
max-height: 156px;
padding: 34px;
}
@include breakpoint-down('tabM') {
min-width: 335px;
max-width: 335px;
min-height: 407px;
max-height: 407px;
padding: 30px;
}
@include breakpoint-down('mobM') {
min-width: 100%;
max-width: 100%;
}
.block-features__cardText {
width: 100%;
@include breakpoint-down('deskL') {
width: 350px;
}
@include breakpoint-down('tabL') {
width: 220px;
}
}
.block-features__cardDescription {
@include breakpoint-down('tabM') {
@include body;
}
}
.block-features__cardTitle {
text-wrap: auto;
@include breakpoint-down('deskL') {
width: 177px;
margin-bottom: 12px;
}
@include breakpoint-down('tabL') {
width: 132px;
margin-bottom: 8px;
}
@include breakpoint-down('tabM') {
@include H1;
width: 211px;
}
}
img {
width: 526.5px;
height: 507.928466796875px;
position: absolute;
bottom: 0;
left: 0;
right: -43px;
margin: auto;
@include breakpoint-down('deskL') {
width: 478.986816px;
height: 260px;
right: 0;
flex: 1;
}
@include breakpoint-down('deskS') {
height: 200px;
width: auto;
}
@include breakpoint-down('tabL') {
width: 241.839844px;
height: 136.999878px;
bottom: 0;
left: auto;
right: 97px;
}
@include breakpoint-down('tabM') {
width: 295.839844px;
height: 193.999878px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
}
#blockFeature2 {
display: flex;
gap: 82px;
overflow: visible;
height: 424px;
@include breakpoint-down('deskL') {
height: 270px;
}
@include breakpoint-down('tabL') {
height: 412px;
gap: 10px;
}
@include breakpoint-down('tabM') {
height: 425px;
gap: 26px;
}
.block-features__cardText {
width: 259px;
@include breakpoint-down('deskL') {
width: 218px;
}
@include breakpoint-down('deskS') {
width: 190px;
}
@include breakpoint-down('tabL') {
width: 218px;
}
}
.block-features__cardDescription {
@include breakpoint-down('tabL') {
@include body;
}
@include breakpoint-down('tabM') {
@include H2;
font-weight: 400;
}
}
img {
position: absolute;
width: 403px;
height: 281px;
top: 119px;
right: 16px;
@include breakpoint-down('deskL') {
width: 322px;
height: 223px;
top: 36px;
right: 3px;
}
@include breakpoint-down('deskS') {
width: 268px;
height: auto;
}
@include breakpoint-down('tabL') {
width: 275.7333068847656px;
height: 188px;
position: static;
}
@include breakpoint-down('tabM') {
width: 296px;
height: 202px;
margin-left: -15px;
}
}
}
#blockFeature3 {
display: flex;
flex-direction: column;
gap: 23px;
overflow: visible;
@include breakpoint-down('deskS') {
}
@include breakpoint-down('tabL') {
padding: 38px;
}
@include breakpoint-down('tabM') {
padding: 38px;
height: 527px;
}
.block-features__cardText {
@include breakpoint-down('deskL') {
width: 255.38px;
}
}
.block-features__cardDescription {
@include breakpoint-down('tabL') {
@include body;
}
@include breakpoint-down('tabM') {
@include H3;
font-weight: 400;
width: 230px;
}
:global(br) {
@include breakpoint-down('tabL') {
display: none;
}
@include breakpoint-down('tabM') {
display: inline;
}
}
}
img {
position: absolute;
top: 26px;
right: 71.82px;
width: 338.7210998535156px;
height: 516.6870727539062px;
@include breakpoint-down('deskL') {
width: 266.4296875px;
height: 406.4133605957031px;
top: 0;
right: 3px;
}
@include breakpoint-down('tabL') {
width: 248.4584960938px;
height: 299px;
margin-left: 9px;
position: static;
}
@include breakpoint-down('tabM') {
width: 305.9145202636719px;
height: 394px;
margin-left: -21px;
margin-top: 6px;
}
}
}
&.locale {
#blockFeature1 {
min-height: auto;
height: inherit;
@include breakpoint-down('tabM') {
min-height: 407px;
max-height: 407px;
}
}
#blockFeature3 .block-features__cardDescription {
@include breakpoint-down('tabL') {
font-size: 13px;
}
@include breakpoint-down('tabM') {
font-size: 16px;
}
}
}
&.ru {
#blockFeature2 img {
@include breakpoint-down('deskL') {
right: -6px;
}
}
}
&.es, &.pt {
#blockFeature1 .block-features__cardText, #blockFeature1 .block-features__cardTitle {
@include breakpoint-down('tabL') {
width: 296px;
}
@include breakpoint-down('tabM') {
width: fit-content;
}
}
}
}
</style>