.overflow-hidden {
  overflow: hidden;
}

h3.subtitle {
  @media (width < 1024px) {
    font-size: var(--font-size-4xl);
    line-height: 4.8rem;
  }

  @media (width >= 1024px) {
    font-size: var(--font-size-6xl);
    line-height: 6.2rem;
  }
}

.align-center {
  margin-inline: auto;
  text-align: center;
  width: fit-content;
}

.align-left {
  @media (width < 1024px) {
    margin-right: var(--space-md);
  }

  @media (width >= 1024px) {
    margin-right: var(--space-lg);
  }
}

.align-right {
  @media (width < 1024px) {
    margin-left: var(--space-md);
  }

  @media (width >= 1024px) {
    margin-left: var(--space-lg);
  }
}

.section-inner-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--l-max-width);
  position: relative;
  width: 100%;
  z-index: 1;

  @media (width < 1024px) {
    padding-block: var(--space-xl);
    row-gap: var(--space-xl);
  }

  @media (width >= 1024px) {
    padding-block: var(--space-2xl);
    row-gap: var(--space-xxl);
  }
}

.section-icon {
  @media (width < 1024px) {
    height: 5.4rem;
    width: 5.4rem;
  }

  @media (width >= 1024px) {
    height: 8.2rem;
    width: 8.2rem;
  }

  svg {
    height: 100%;
    width: 100%;
  }

  img {
    height: 100%;
  }
}

.section-inner-row {
  align-items: center;
  display: flex;
  height: 100%;
  margin-inline: auto;
  max-width: var(--l-max-width);
  position: relative;
  width: 100%;
  z-index: 1;

  @media (width < 1024px) {
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-xl);
    row-gap: var(--space-xl);
  }

  @media (width >= 1024px) {
    column-gap: var(--space-4xl);
    flex-direction: row;
    justify-content: space-between;
    padding-block: var(--space-2xl);
  }
}

.theme-dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-secondary);
}

.theme-light {
  background-color: var(--color-background-light);
  color: var(--color-text-primary);
}

.theme-neutral {
  background-color: var(--color-background-neutral);
  color: var(--color-text-primary);
}

.theme-transparent {
  background-color: transparent;
  color: var(--color-text-primary);
}

.theme-accent {
  background-color: var(--color-background-accent);
  color: var(--color-text-secondary);
}

.background-image {
  position: relative;

  &::after {
    background-image: url("../../../icon.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 100%;
    opacity: 0.15;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;

    @media (width < 1024px) {
      height: 32.8rem;
      top: 50%;
      width: 32.8rem;
    }

    @media (width >= 1024px) {
      width: 55%;
    }
  }
}

/* Category Colors */
.default {
  background-color: var(--color-brand-primary);
  color: var(--color-text-secondary);
}

.yellow {
  background-color: var(--color-yellow);
  color: var(--color-text-secondary);
}

.red {
  background-color: var(--color-red);
  color: var(--color-text-secondary);
}

.orange {
  background-color: var(--color-orange);
  color: var(--color-text-secondary);
}

.green {
  background-color: var(--color-green);
  color: var(--color-text-secondary);
}

.dark_blue {
  background-color: var(--color-dark-blue);
  color: var(--color-text-secondary);
}

.blue {
  background-color: var(--color-blue);
  color: var(--color-text-secondary);
}

.color-grey {
  color: var(--color-text-dark-gray);
}

.color-blue {
  color: var(--color-accent);
}

.download,
.location,
.phone {
  align-items: center;
  color: var(--color-text-primary);
  column-gap: var(--space-sm);
  display: flex;
  font-weight: var(--font-weight-semibold);
  position: relative;
  width: fit-content;

  @media (width >= 1024px) {

    &:hover {
      color: var(--color-accent);

      &::before {
        background-color: var(--color-accent);
      }
    }
  }

  &::before {
    background-color: var(--color-text-primary);
    bottom: -0.4rem;
    content: "";
    height: 0.2rem;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  &::after {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 1.6rem;
    position: relative;
    right: 0;
    top: 0;
    width: 1.6rem;
  }
}

.download::after {
  background-image: url("../../../assets/svg/icon-download.svg");
}

.location::after {
  background-image: url("../../../assets/svg/icon-location.svg");
}

.phone::after {
  background-image: url("../../../assets/svg/icon-phone.svg");
}

.color-orange {
  color: var(--color-orange);
}

.link--absolute {
  bottom: 0;
  cursor: pointer;
  font-size: 0;
  height: 100%;
  left: 0;
  position: absolute;
  text-indent: -999.9rem;
  width: 100%;
  z-index: 2;
}

.pager {

  .pager__items {
    align-items: center;
    column-gap: var(--space-md);
    display: flex;
    flex-direction: row;
  }
}

.display-flags {

  .language-link {
    position: relative;

    &::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      content: "";
      display: inline-block;
      left: 0;
      margin-right: var(--space-sm);
      min-height: 1.9rem;
      min-width: 2.4rem;
      position: relative;
      top: 50%;
      transform: translateY(25%);
    }
  }
}

.flag--sr:before,
.flag--sr-latn:before {
  background-image: url("../../../assets/svg/flag--sr.svg");
}

.flag--en:before {
  background-image: url("../../../assets/svg/flag--en.svg");
}

.flag--de:before {
  background-image: url("../../../assets/svg/flag--de.svg");
}

.flag--fr:before {
  background-image: url("../../../assets/svg/flag--fr.svg");
}

.contextual .trigger::before {
  height: 12px !important;
  width: 12px !important;
}