/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
.snk-textMedia-inner {
  align-items: center;
}
.snk-section .row.snk-textMedia-inner {
  --snk-gutter-y: 2rem !important;
}
@media (min-width: 1024px) {
  .snk-section .row.snk-textMedia-inner {
    --snk-gutter-x: 5rem !important;
  }
}

.snk-textMedia-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .snk-textMedia-text {
    gap: 1rem;
  }
}
.snk-textMedia-text > *,
.snk-textMedia-text > ul,
.snk-textMedia-text > ul > li:last-child {
  margin-bottom: 0;
}
.snk-textMedia_checkMark_icon ul:not([class]) {
  padding-left: 1.25rem;
}
.snk-textMedia_checkMark_icon ul:not([class]) li::before {
  left: -1.25rem;
  --snk-list-bullet-width: 0.7rem;
  background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"%3e  %3cpath d="M3.64425 8.87698L0 5.23273L1.04425 4.18848L3.64425 6.78848L10.2443 0.188477L11.2885 1.23273L3.64425 8.87698Z" fill="%23004959"/%3e  %3c/svg%3e');
}
.snk-textMedia .snk-media.snk-media_image img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.snk-textMedia .snk-images-container {
  --snk-image-gap: 1rem;
  display: flex;
  gap: var(--snk-image-gap, 1rem);
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
@media (min-width: 1024px) {
  .snk-textMedia .snk-images-container {
    --snk-image-gap: 1rem;
  }
}
.snk-textMedia .snk-images-container .snk-image:first-child {
  aspect-ratio: 16/6;
  width: 100%;
  object-fit: cover;
}
.snk-textMedia .snk-images-container .snk-image:nth-child(2) {
  aspect-ratio: 1/1;
  width: calc(50% - var(--snk-image-gap) / 2);
  object-fit: cover;
}
.snk-textMedia .snk-images-container .snk-image:nth-child(3) {
  aspect-ratio: 4/6;
  width: calc(50% - var(--snk-image-gap) / 2);
  object-fit: cover;
}
@media (min-width: 768px) {
  .snk-textMedia_left .snk-textMedia-text, .snk-textMedia_right .snk-textMedia-text {
    max-width: 34.5rem;
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .snk-textMedia_left .snk-textMedia-inner > *:first-child, .snk-textMedia_right .snk-textMedia-inner > *:first-child {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) {
  .snk-textMedia_top .snk-topics-container {
    max-width: 34.5rem;
    width: 100%;
    justify-self: flex-end;
  }
}
.snk-textMedia_top .snk-topic {
  border-bottom: 1px solid #d9e4e6;
}
.snk-textMedia_top .snk-topic:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .snk-textMedia_top .snk-topic:not(:last-child) {
    margin-bottom: 1rem;
  }
}
.snk-textMedia_top .snk-topic > * {
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .snk-textMedia_top .snk-topic > * {
    margin-bottom: 1rem;
  }
}
@media (max-width: 767.98px) {
  .snk-textMedia_top .snk-textMedia-inner > *:last-child {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) {
  .snk-textMedia_top .snk-textMedia-inner {
    align-items: flex-start;
  }
}
.snk-textMedia_top .snk-textMedia-media {
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .snk-textMedia_top .snk-textMedia-media,
  .snk-textMedia_top .snk-textMedia-media + .col-md {
    margin-top: 2rem;
  }
  .snk-textMedia_top .snk-textMedia-media {
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  .snk-textMedia_top .snk-textMedia-text {
    max-width: 46rem;
  }
}
@media (max-width: 767.98px) {
  .snk-textMedia_right .snk-textMedia-inner {
    flex-direction: column-reverse;
  }
}
@media (min-width: 768px) {
  .snk-textMedia_right .snk-textMedia-media {
    padding-left: 0;
  }
}
.snk-textMedia_left .snk-textMedia-inner {
  flex-direction: row-reverse;
}
@media (max-width: 767.98px) {
  .snk-textMedia_left .snk-textMedia-inner {
    flex-direction: column-reverse;
  }
}
@media (min-width: 768px) {
  .snk-textMedia_left .snk-textMedia-media {
    padding-right: 0;
  }
  .snk-textMedia_left .snk-textMedia-text {
    justify-self: flex-end;
  }
}