<div class="o-container c-instagram-callout" data-bkg-theme="base">
<div class="c-instagram-callout__wrapper o-row">
<div class="c-instagram-callout__content o-col o-col-sm-6">
<div class="c-instagram-callout__content-inner js-watch u-watch--fade-up">
<h2 id="instagram-callout-4543" class="c-instagram-callout__title f-title--h2">A force <br> for nature</h2>
<div class="c-instagram-callout__desc f-text--reg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus lacus, eleifend in pretium laoreet, porttitor eu neque. Donec risus elit, euismod sed neque quis, rutrum egestas ipsum.</p>
</div>
<div class="c-instagram-callout__cta f-text--cta">
<a href=# class="c-instagram-callout__cta-link">
<span class="u-sr-only">Vist our instagram: </span>
<span class="c-instagram-callout__cta-icon" aria-hidden="true"><svg width="25" height="25" viewbox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.1094 45.9981C10.4462 46.163 0.0180481 35.7447 2.41143e-05 23.0767C-0.0179999 10.4397 10.0703 0.4569 22.0717 0.0162536C35.309 -0.470776 46.0488 10.0506 45.9998 23.069C45.9509 36.1415 35.3451 46.0367 23.1094 45.9981ZM8.93478 23.0097C9.03262 25.347 9.00687 27.7177 9.26178 30.0575C9.65831 33.6986 11.9757 36.09 15.5959 36.6492C17.1949 36.8965 18.8428 36.8888 20.4676 36.8888C23.5548 36.8888 26.6498 36.9378 29.7242 36.7316C32.9556 36.5177 35.3193 34.8376 36.3029 31.6706C36.7201 30.3255 36.8256 28.8489 36.8668 27.4265C36.9492 24.4889 36.9132 21.5461 36.8797 18.6059C36.8668 17.5596 36.8024 16.5005 36.6171 15.4724C36.1124 12.6662 34.5881 10.5995 31.8304 9.71562C30.5713 9.31105 29.1912 9.1384 27.8651 9.12552C23.9874 9.08429 20.0994 9.03533 16.2319 9.25694C12.2975 9.47597 9.68149 12.0683 9.25663 15.9774C9.00172 18.2966 9.03262 20.6467 8.93478 23.0097Z" fill="black" />
<path d="M22.9124 11.4854C25.2169 11.5781 27.475 11.5627 29.71 11.7817C32.3724 12.0445 34.0924 13.7556 34.1826 16.4278C34.3267 20.7132 34.3473 25.0088 34.2057 29.2916C34.1027 32.3709 32.2874 34.149 29.2053 34.2495C25.0315 34.3835 20.8447 34.3835 16.6709 34.2443C13.5347 34.1413 11.7014 32.005 11.6628 28.8484C11.6293 25.9958 11.5314 23.1406 11.5598 20.288C11.5752 18.6877 11.6422 17.0643 11.9383 15.4976C12.3631 13.2454 13.9518 12.0162 16.1559 11.7946C18.4141 11.5678 20.6928 11.5781 22.9124 11.4854ZM15.8057 22.986C15.7928 26.9002 19.0372 30.1677 22.9484 30.1832C26.8905 30.1986 30.1246 26.9569 30.1452 22.9653C30.1658 19.0511 26.9137 15.8145 22.9613 15.8171C19.0166 15.8197 15.816 19.0253 15.8057 22.986ZM32.0557 15.5285C32.0377 14.5956 31.2832 13.8509 30.3717 13.8664C29.4654 13.8818 28.7187 14.6523 28.7238 15.5697C28.729 16.5335 29.4989 17.2885 30.4464 17.2576C31.3759 17.2241 32.0737 16.4768 32.0557 15.5285Z" fill="black" />
<path d="M18.34 22.9735C18.3632 20.3631 20.4179 18.3532 23.0392 18.3712C25.5857 18.3893 27.6276 20.4714 27.6121 23.0379C27.5993 25.5427 25.4492 27.6634 22.9413 27.6454C20.4308 27.6299 18.3169 25.4834 18.34 22.9735Z" fill="black" />
</svg>
</span>
<span class="u-hover-drawline--thin">@ACADNATSCI</span>
</a>
</div>
</div>
</div>
<div class="swiper-container c-instagram-callout__mobile">
<ul class="c-instagram-callout__items o-col o-col-sm-6 swiper-wrapper" aria-labelledby="instagram-callout-4543">
<li class="c-instagram-callout__item js-watch u-watch--img-shrink swiper-slide">
<a href="#">
<img src="/images//homepage/social_06.png" alt="" />
</a>
</li>
<li class="c-instagram-callout__item js-watch u-watch--img-shrink swiper-slide">
<a href="#">
<img src="/images//homepage/social_05.png" alt="" />
</a>
</li>
<li class="c-instagram-callout__item js-watch u-watch--img-shrink swiper-slide">
<a href="#">
<img src="/images/homepage/social_02.jpg" alt="" />
</a>
</li>
</ul>
</div>
<ul class="c-instagram-callout__items o-col o-col-sm-6 c-instagram-callout__sm-screen" aria-labelledby="instagram-callout-4543">
<li class="c-instagram-callout__item js-watch u-watch--img-shrink">
<a href="#">
<img src="/images//homepage/social_06.png" alt="" />
</a>
</li>
<li class="c-instagram-callout__item js-watch u-watch--img-shrink">
<a href="#">
<img src="/images//homepage/social_05.png" alt="" />
</a>
</li>
<li class="c-instagram-callout__item js-watch u-watch--img-shrink">
<a href="#">
<img src="/images/homepage/social_02.jpg" alt="" />
</a>
</li>
</ul>
</div>
</div>
{% set hID = 'instagram-callout-' ~ random(5000) %}
<div class="o-container c-instagram-callout" data-bkg-theme="base">
<div class="c-instagram-callout__wrapper o-row">
<div class="c-instagram-callout__content o-col o-col-sm-6">
<div class="c-instagram-callout__content-inner js-watch u-watch--fade-up">
<h2 id="{{ hID }}" class="c-instagram-callout__title f-title--h2">{{title}}</h2>
<div class="c-instagram-callout__desc f-text--reg">
{{ description }}
</div>
<div class="c-instagram-callout__cta f-text--cta">
<a href={{ instagramLink }} class="c-instagram-callout__cta-link">
<span class="u-sr-only">Vist our instagram: </span>
<span class="c-instagram-callout__cta-icon" aria-hidden="true">{% include '03-icons/social/instagram' %}</span>
<span class="u-hover-drawline--thin">@{{ instagramHandle }}</span>
</a>
</div>
</div>
</div>
<div class="swiper-container c-instagram-callout__mobile">
<ul class="c-instagram-callout__items o-col o-col-sm-6 swiper-wrapper" aria-labelledby="{{ hID }}">
{% for image in images %}
<li class="c-instagram-callout__item js-watch u-watch--img-shrink swiper-slide">
<a href="{{ image.instagramLink }}">
{{ image.image|raw }}
</a>
</li>
{% endfor %}
</ul>
</div>
<ul class="c-instagram-callout__items o-col o-col-sm-6 c-instagram-callout__sm-screen" aria-labelledby="{{ hID }}">
{% for image in images %}
<li class="c-instagram-callout__item js-watch u-watch--img-shrink">
<a href="{{ image.instagramLink }}">
{{ image.image|raw }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "A force <br> for nature",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus lacus, eleifend in pretium laoreet, porttitor eu neque. Donec risus elit, euismod sed neque quis, rutrum egestas ipsum.</p>",
"instagramLink": "#",
"instagramHandle": "ACADNATSCI",
"images": [
{
"instagramLink": "#",
"image": "<img src=\"/images//homepage/social_06.png\" alt=\"\" />"
},
{
"instagramLink": "#",
"image": "<img src=\"/images//homepage/social_05.png\" alt=\"\" />"
},
{
"instagramLink": "#",
"image": "<img src=\"/images/homepage/social_02.jpg\" alt=\"\" />"
}
]
}
.c-instagram-callout {
margin-top: 4.8rem;
margin-bottom: 4.8rem;
@include break($sm-md) {
margin-top: 12rem;
margin-bottom: 20rem;
}
}
.c-instagram-callout__wrapper {
@include break($sm) {
flex-direction: row-reverse;
}
}
.c-instagram-callout__content {
margin-bottom: 3.2rem;
position: relative;
@include break($sm) {
margin-bottom: 0;
position: sticky;
top: 0;
}
@include break($sm-md) {
padding-left: 3.2rem;
}
}
.c-instagram-callout__content-inner {
@include break($sm) {
position: sticky;
top: 3.2rem;
left: 0;
}
}
.c-instagram-callout__desc {
max-width: 55rem;
}
.c-instagram-callout__item {
& + & {
margin-top: 3rem;
}
}
.c-instagram-callout__title {
margin-bottom: 2rem;
@include break($sm) {
margin-bottom: 3.2rem;
}
}
.c-instagram-callout__cta-link {
display: flex;
align-items: center;
margin-top: 5rem;
@include break($sm) {
margin-top: 4.4rem;
}
&:hover {
.c-instagram-callout__cta-icon:before {
width: 3rem;
height: 3rem;
border-color: $c-reef;
}
path {
fill: $c-reef;
}
}
.u-hover-drawline--thin {
padding-bottom: 0.2rem;
}
}
.c-instagram-callout__cta-icon {
position: relative;
margin-right: 1.5rem;
display: inline-block;
width: 2.5rem;
height: 2.5rem;
&:before {
content: '';
display: block;
width: 2.5rem;
height: 2.5rem;
border: 0.1rem solid var(--ct-txt);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: all 0.3s $ease-standard-cubic;
}
svg {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
* {
transition: all 0.3s $ease-standard-cubic;
fill: currentColor;
}
}
}
.c-instagram-callout__mobile {
margin-top: 2.1rem;
@include break($sm) {
display: none;
}
}
.c-instagram-callout__sm-screen {
display: none;
@include break($sm) {
display: block;
}
}
No notes defined.