/* light styles */
section.light .section_block-btns a:first-child {
  color: #000;
  border-color: var(--color-orange);
}

/* dark styles */
section.dark {
  background-color: #000;
}

section.dark h2 {
  color: #fff;
}

section.dark .section_tag {
  color: #fff;
  margin-bottom: 0;
}

section.dark .section_desc {
  color: var(--color-yellow);
}

section.dark .section_block-btns .button2 {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

.font-serif {
  font-family: 'Montserrat', serif;
}

.flex {
  display: flex;
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.gap-5 {
  gap: 20px;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: end;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.overflow-hidden {
  overflow: hidden;
}

.mt-20px {
  margin-top: 20px;
}

.mb-30px {
  margin-bottom: 30px;
}

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

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.list-cols-2 > * { /* for 20px x-gap */
  width: calc(50% - (20px / 2));
}

/* new queries */
@media (min-width: 768px) {
  .md-list-cols-2 > * {
    width: calc(50% - (20px / 2));
  }

  .md-list-cols-3 > * {
    width: calc(33% - (20px * 2 / 3));
  }
}

@media (min-width: 1024px) {
  .lg-hidden {
    display: none !important;
  }

  .lg-block {
    display: block !important;
  }

  .lg-list-cols-3 > * {
    width: calc(33% - (20px * 2 / 3));
  }

  .lg-list-cols-4 > * {
    width: calc(25% - (20px * 3 / 4));
  }

  .lg-list-cols-5 > * {
    width: calc(20% - (20px * 4 / 5));
  }
}

@media (min-width: 1200px) {
  .xl-list-cols-4 > * {
    width: calc(25% - (20px * 3 / 4));
  }

  .xl-list-cols-5 > * {
    width: calc(20% - (20px * 4 / 5));
  }

  .xl-list-cols-6 > * {
    width: calc(16.6% - (20px * 5 / 6));
  }

  .xl-list-cols-7 > * {
    width: calc(14.2% - (20px * 6 / 7));
  }
}

@media (min-width: 1600px) {
  .xl2-list-cols-5 > * {
    width: calc(20% - (20px * 4 / 5));
  }

  .xl2-list-cols-6 > * {
    width: calc(16.6% - (20px * 5 / 6));
  }

  .xl2-list-cols-7 > * {
    width: calc(14.2% - (20px * 6 / 7));
  }
}