No notes defined.
<div class="grid grid-3-cols">
<div>
<div class="iconBox iconBox--bg-offwhite">
<div class="iconBox__icon">
<svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The quick brown fox jumps over the lazy dog</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>
<div>
<a class="iconBox iconBox--bg-teal" href="">
<div class="iconBox__icon">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.3704 0.936768C22.1368 0.936768 0.870361 22.2032 0.870361 48.4368C0.870361 74.6703 22.1368 95.9368 48.3704 95.9368C74.6039 95.9368 95.8704 74.6703 95.8704 48.4368C95.8704 22.2032 74.6039 0.936768 48.3704 0.936768ZM48.0283 22.6805C54.4428 22.7111 60.3061 26.8016 62.7967 32.5087C63.6487 34.4965 64.1013 36.5386 64.1013 38.7536V44.4012H71.8826V74.193H24.8581V44.4011H32.0133C31.9484 40.4106 31.8663 35.8455 33.2657 32.5086C35.9866 26.4991 41.6136 22.65 48.0283 22.6805ZM47.6803 32.1666C44.1273 32.2413 41.784 34.9432 41.4412 38.7534V44.4011H54.6731V38.6955C54.51 35.0823 51.7753 32.2661 48.0281 32.1666C47.9122 32.1639 47.7963 32.1639 47.6803 32.1666Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The SVG here has been included directly</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</a>
</div>
<div>
<a class="iconBox iconBox--bg-neon" href="">
<div class="iconBox__icon">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The quick brown fox jumps over the lazy dog</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</a>
</div>
</div>
<div class="grid grid-3-cols">
<div>
<div class="iconBox iconBox--bg-digital-blue">
<div class="iconBox__icon">
<svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The quick brown fox jumps over the lazy dog</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>
<div>
<a class="iconBox iconBox--bg-burgundy" href="">
<div class="iconBox__icon">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.3704 0.936768C22.1368 0.936768 0.870361 22.2032 0.870361 48.4368C0.870361 74.6703 22.1368 95.9368 48.3704 95.9368C74.6039 95.9368 95.8704 74.6703 95.8704 48.4368C95.8704 22.2032 74.6039 0.936768 48.3704 0.936768ZM48.0283 22.6805C54.4428 22.7111 60.3061 26.8016 62.7967 32.5087C63.6487 34.4965 64.1013 36.5386 64.1013 38.7536V44.4012H71.8826V74.193H24.8581V44.4011H32.0133C31.9484 40.4106 31.8663 35.8455 33.2657 32.5086C35.9866 26.4991 41.6136 22.65 48.0283 22.6805ZM47.6803 32.1666C44.1273 32.2413 41.784 34.9432 41.4412 38.7534V44.4011H54.6731V38.6955C54.51 35.0823 51.7753 32.2661 48.0281 32.1666C47.9122 32.1639 47.7963 32.1639 47.6803 32.1666Z"></path>
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The quick brown fox jumps over the lazy dog</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</a>
</div>
<div>
<a class="iconBox iconBox--bg-dark-blue" href="">
<div class="iconBox__icon">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The quick brown fox jumps over the lazy dog</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</a>
</div>
</div>
<div class="grid grid-3-cols">
<div>
<div class="iconBox iconBox--bg-offwhite">
<div class="iconBox__icon">
<svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">{{ pangram }}</div>
<p>{{ loremShort }}</p>
</div>
</div>
</div>
<div>
<a class="iconBox iconBox--bg-teal" href="">
<div class="iconBox__icon">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.3704 0.936768C22.1368 0.936768 0.870361 22.2032 0.870361 48.4368C0.870361 74.6703 22.1368 95.9368 48.3704 95.9368C74.6039 95.9368 95.8704 74.6703 95.8704 48.4368C95.8704 22.2032 74.6039 0.936768 48.3704 0.936768ZM48.0283 22.6805C54.4428 22.7111 60.3061 26.8016 62.7967 32.5087C63.6487 34.4965 64.1013 36.5386 64.1013 38.7536V44.4012H71.8826V74.193H24.8581V44.4011H32.0133C31.9484 40.4106 31.8663 35.8455 33.2657 32.5086C35.9866 26.4991 41.6136 22.65 48.0283 22.6805ZM47.6803 32.1666C44.1273 32.2413 41.784 34.9432 41.4412 38.7534V44.4011H54.6731V38.6955C54.51 35.0823 51.7753 32.2661 48.0281 32.1666C47.9122 32.1639 47.7963 32.1639 47.6803 32.1666Z"/>
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">The SVG here has been included directly</div>
<p>{{ loremShort }}</p>
</div>
</a>
</div>
<div>
<a class="iconBox iconBox--bg-neon" href="">
<div class="iconBox__icon">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">{{ pangram }}</div>
<p>{{ loremShort }}</p>
</div>
</a>
</div>
</div>
<div class="grid grid-3-cols">
<div>
<div class="iconBox iconBox--bg-digital-blue">
<div class="iconBox__icon">
<svg width="31" height="59" viewBox="0 0 31 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.7265 33.0794L30.31 22.7563H20.4116V16.0572C20.4116 13.2336 21.7938 10.4794 26.2274 10.4794H30.7268V1.69114C30.7268 1.69114 26.6442 0.994141 22.7397 0.994141C14.5887 0.994141 9.26094 5.93911 9.26094 14.8896V22.758H0.199707V33.0812H9.26094V58.0377H20.4116V33.0812L28.7265 33.0794Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">{{ pangram }}</div>
<p>{{ loremShort }}</p>
</div>
</div>
</div>
<div>
<a class="iconBox iconBox--bg-burgundy" href="">
<div class="iconBox__icon">
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.3704 0.936768C22.1368 0.936768 0.870361 22.2032 0.870361 48.4368C0.870361 74.6703 22.1368 95.9368 48.3704 95.9368C74.6039 95.9368 95.8704 74.6703 95.8704 48.4368C95.8704 22.2032 74.6039 0.936768 48.3704 0.936768ZM48.0283 22.6805C54.4428 22.7111 60.3061 26.8016 62.7967 32.5087C63.6487 34.4965 64.1013 36.5386 64.1013 38.7536V44.4012H71.8826V74.193H24.8581V44.4011H32.0133C31.9484 40.4106 31.8663 35.8455 33.2657 32.5086C35.9866 26.4991 41.6136 22.65 48.0283 22.6805ZM47.6803 32.1666C44.1273 32.2413 41.784 34.9432 41.4412 38.7534V44.4011H54.6731V38.6955C54.51 35.0823 51.7753 32.2661 48.0281 32.1666C47.9122 32.1639 47.7963 32.1639 47.6803 32.1666Z"></path>
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">{{ pangram }}</div>
<p>{{ loremShort }}</p>
</div>
</a>
</div>
<div>
<a class="iconBox iconBox--bg-dark-blue" href="">
<div class="iconBox__icon">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.3439 14.865C21.2517 14.865 14.7209 21.3959 14.7209 29.4883C14.7209 37.5806 21.2517 44.1115 29.3439 44.1115C37.4361 44.1115 43.9669 37.5806 43.9669 29.4883C43.9669 21.3959 37.4361 14.865 29.3439 14.865ZM29.3439 38.9923C24.1107 38.9923 19.84 34.7216 19.84 29.4883C19.84 24.255 24.1107 19.9842 29.3439 19.9842C34.5771 19.9842 38.8478 24.255 38.8478 29.4883C38.8478 34.7216 34.5771 38.9923 29.3439 38.9923ZM44.5658 10.8581C42.6764 10.8581 41.1507 12.3838 41.1507 14.2733C41.1507 16.1627 42.6764 17.6884 44.5658 17.6884C46.4551 17.6884 47.9809 16.1698 47.9809 14.2733C47.9815 13.8246 47.8935 13.3803 47.7221 12.9657C47.5507 12.551 47.2991 12.1743 46.9819 11.8571C46.6647 11.5399 46.288 11.2883 45.8734 11.1169C45.4588 10.9455 45.0144 10.8575 44.5658 10.8581ZM57.8484 29.4883C57.8484 25.5526 57.884 21.6526 57.663 17.7241C57.442 13.161 56.4011 9.11126 53.0644 5.77451C49.7205 2.43062 45.678 1.3968 41.115 1.17578C37.1794 0.954753 33.2795 0.990402 29.351 0.990402C25.4154 0.990402 21.5155 0.954753 17.5871 1.17578C13.0241 1.3968 8.97439 2.43775 5.6377 5.77451C2.29388 9.11839 1.26008 13.161 1.03905 17.7241C0.818035 21.6597 0.853683 25.5597 0.853683 29.4883C0.853683 33.4168 0.818035 37.3239 1.03905 41.2525C1.26008 45.8156 2.30101 49.8653 5.6377 53.202C8.98152 56.5459 13.0241 57.5798 17.5871 57.8008C21.5226 58.0218 25.4226 57.9862 29.351 57.9862C33.2866 57.9862 37.1866 58.0218 41.115 57.8008C45.678 57.5798 49.7277 56.5388 53.0644 53.202C56.4082 49.8582 57.442 45.8156 57.663 41.2525C57.8912 37.3239 57.8484 33.4239 57.8484 29.4883ZM51.5743 46.3004C51.0538 47.598 50.4264 48.5677 49.4211 49.5658C48.4158 50.5711 47.4533 51.1986 46.1557 51.719C42.4055 53.2092 33.5005 52.8741 29.3439 52.8741C25.1873 52.8741 16.2752 53.2092 12.525 51.7262C11.2274 51.2057 10.2577 50.5783 9.25958 49.573C8.2543 48.5677 7.62688 47.6051 7.10642 46.3075C5.62344 42.5501 5.95854 33.645 5.95854 29.4883C5.95854 25.3316 5.62344 16.4193 7.10642 12.669C7.62688 11.3714 8.2543 10.4018 9.25958 9.40359C10.2649 8.40541 11.2274 7.77086 12.525 7.25038C16.2752 5.76738 25.1873 6.10248 29.3439 6.10248C33.5005 6.10248 42.4126 5.76738 46.1628 7.25038C47.4604 7.77086 48.4301 8.39828 49.4282 9.40359C50.4335 10.4089 51.0609 11.3714 51.5814 12.669C53.0644 16.4193 52.7293 25.3316 52.7293 29.4883C52.7293 33.645 53.0644 42.5501 51.5743 46.3004Z" />
</svg>
</div>
<div class="iconBox__content">
<div class="h6 iconBox__title">{{ pangram }}</div>
<p>{{ loremShort }}</p>
</div>
</a>
</div>
</div>
.iconBox {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: calc(#{$spacing-md} + 2.5%) $spacing-xs;
margin: 0 0 $spacing-md;
background: $neutral--primary;
color: white;
text-decoration: none;
border-radius: 0.25rem;
font-weight: 600;
// --
&__icon {
flex: 1 1 $spacing-3xl;
padding: 0 calc(#{$spacing-xs} + 1.25%);
box-sizing: border-box;
@include typescale('3xl');
text-align: center;
.icon, img {
display: block;
margin: auto auto $spacing-lg;
}
& > svg {
width: 1em;
height: 1em;
}
}
&__content {
flex: 1 1 80%;
padding: 0 calc(#{$spacing-xs} + 1.25%);
box-sizing: border-box;
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
&__title {
margin: 0 0 $spacing-sm;
}
// --
@each $name, $value in $socialmedia-prime-colours {
&--#{$name} {
background: #{$value};
color: white;
}
}
@each $name, $value in $icon-box-colors {
&--bg-#{$name} {
background: #{$value};
}
}
.iconBox__icon svg {
fill: white;
}
&--bg-offwhite, &--bg-neon {
color: $dark-blue;
& .iconBox__icon svg {
fill: $dark-blue;
}
}
}
a.iconBox {
&:hover {
color: white;
.iconBox__title {
color: white;
text-decoration: underline;
}
&.iconBox--bg-offwhite, &.iconBox--bg-neon
{
color: inherit;
.iconBox__title {
color: inherit;
}
}
}
}
.grid-3-cols {
& .iconBox__icon svg {
vertical-align: top;
}
}