.fc_icon_grid {
.slides--icons {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-xxs);
margin: 0 auto;
overflow: hidden;
transition-timing-function: linear;
.tns-item {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
}
img {
max-height: 140px;
width: auto;
}
.tns-controls {
display: none;
}
&.padding_full {
padding-inline: 0;
}
}.fc_block_links {
.links_container {
display: grid;
grid-template-columns: repeat(1, 1fr);
.block_link {
border-radius: var(--border-radius-m);
display: flex;
flex-direction: column;
font-weight: 400;
} &.standard {
.block_link {
--color-text: var(--color-black);
padding: var(--gap-m);
background-color: var(--color-white);
color: var(--color-text);
gap: var(--gap-xxl);
transition:
background-color 0.4s ease,
color 0.4s ease;
.image {
img {
height: 100px;
width: auto;
margin-left: auto;
}
}
&:hover {
--color-text: var(--color-white);
background-color: var(--color-primary-pink);
.highlight {
color: currentColor;
}
}
}
}
&.card {
.block_link {
gap: var(--gap-s);
border: 1px solid var(--color-white);
padding: var(--gap-s);
.image {
aspect-ratio: 16 / 10;
border-radius: var(--border-radius-m);
}
&:hover {
--color-text: var(--color-black);
--color-headings: var(--color-black);
background-color: var(--color-white);
color: var(--color-text);
}
&:nth-child(even) {
flex-direction: column-reverse;
}
}
}
&.list {
.block_link {
display: flex;
gap: var(--gap-m);
padding: var(--gap-m);
background-color: var(--color-white);
color: var(--color-black);
transition:
background-color 0.4s ease,
color 0.4s ease;
.wp_content {
> *:not(.button) {
margin-top: 0;
margin-bottom: var(--gap-xxs);
}
> :last-child {
margin-bottom: 0;
}
}
.image {
width: 100%;
aspect-ratio: 16 / 10;
pointer-events: none;
}
&:hover {
background-color: var(--color-primary-pink);
color: var(--color-white);
.highlight {
color: currentColor;
}
}
} &.gap {
gap: calc(var(--gap-s) / 2);
}
} &.gap {
gap: var(--gap-s);
}
} &.bg_white {
.links_container { &.standard {
.block_link {
--color-text: var(--color-white);
background-color: var(--color-black);
&:hover {
background-color: var(--color-primary-pink);
}
}
}
&.card {
.block_link {
border: 1px solid var(--color-black);
&:hover {
--color-text: var(--color-white);
--color-headings: var(--color-white);
background-color: var(--color-black);
}
}
}
}
}
&.bg_white {
.links_container { &.list {
.block_link {
background-color: var(--color-black);
color: var(--color-white);
&:after {
color: var(--color-white);
}
&:hover {
background-color: var(--color-primary-pink);
}
}
}
}
} @media (width >= 576px) {
.links_container {
&.col_2,
&.col_4 {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (width >= 768px) {
.links_container {
&.list {
position: relative;
isolation: isolate;
margin-left: auto;
width: calc(50% - ((var(--gap-s) / 2) * 1) / 2);
.block_link {
flex-direction: row;
align-items: center;
justify-content: space-between;
.content {
position: relative;
isolation: isolate;
&::after {
content: "";
display: block;
position: absolute;
left: calc(0px - var(--gap-m));
bottom: calc(0px - var(--gap-m) - ((var(--gap-s) / 2)));
width: 46vw;
max-width: 584px;
height: calc(var(--gap-s) / 2);
}
}
.image {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
bottom: 0;
left: calc(-100% - (var(--gap-s) * 1) / 2);
width: calc(100% - ((var(--gap-s) / 2) * 1) / 2);
border-radius: var(--border-radius-m);
transition: opacity 0.4s ease;
}
&:after {
content: "";
display: block;
width: clamp(32px, 0.654vw + 28.235px, 40px);
aspect-ratio: 1;
background-color: currentColor;
color: var(--color-primary-pink);
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' fill='none' viewBox='0 0 45 45'%3E%3Ccircle cx='22.5' cy='22.5' r='22' stroke='%23d60d8c'/%3E%3Cpath fill='%23d60d8c' d='M13 22a1 1 0 1 0 0 2v-2m20.707 1.707a1 1 0 0 0 0-1.414l-6.364-6.364a1 1 0 0 0-1.414 1.414L31.586 23l-5.657 5.657a1 1 0 0 0 1.414 1.414zM13 23v1h20v-2H13z'/%3E%3C/svg%3E");
transition: color 0.4s ease;
}
&:hover {
.image {
opacity: 1;
}
&:after {
color: var(--color-white);
}
}
&:first-of-type {
.image {
opacity: 1;
}
}
&:last-of-type {
.content {
&::after {
display: none;
}
}
}
}
}
&.col_3 {
grid-template-columns: repeat(3, 1fr);
}
&.col_4 {
grid-template-columns: repeat(4, 1fr);
}
}
}
}