/**
 * @file
 * Ckeditor styles
 * Use Globaly
 */


/**
 * Font Size
 */

span.heading-size-xs,
.heading-size-xs {
  font-size: var(--heading-size-xs);
}
span.heading-size-s,
.heading-size-s {
  font-size: var(--heading-size-s);
}
span.heading-size-m,
.heading-size-m {
  font-size: var(--heading-size-m);
}
h1:has(span.heading-size-l),
span.heading-size-l,
.heading-size-l {
  font-size: var(--heading-size-l);
}
.text-large {
  font-size: 1.125rem;
  line-height: 150%;
}
.text-extra-large {
  font-size: 1.5rem;
}
span.primary-1 {
  color: var(--color-primary--1);
}

span.text--xl {
  font-size: var(--content-size-l);
}

.text-no-margin {
  margin: 0;
}
p.small-title {
  font-size: 20px;
  line-height: 150%;
  font-weight: 700;
}
p.picto-map,
p.picto-note {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 8px;
}
p.picto-map::before {
  content: '';
  display: block;
  background-image: url('../images/history_slider/map_icon.svg');
  width: 24px;
  height: 24px;
}
p.picto-note::before {
  content: '';
  display: block;
  background-image: url('../images/history_slider/note_icon.svg');
  width: 24px;
  height: 24px;
}
p.highlighted {
  background-color: var(--color-primary--2);
  color: black;
  padding: 40px;
}

.max-width-800px {
  max-width: 800px;
}




@media all and (min-width: 900px){
  .text-large {
    font-size: 1.313rem;
  }
  .text-extra-large {
    font-size: 1.875rem;
  }
  p.small-title {
    font-size: 24px;
  }
}


.square::before{
  content: '';
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  background-image: url('../images/icons/diag_arrow.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.square_small.square::before{
  width: 38px;
  height: 38px;
}

.max-width-640px{
  max-width: 640px;
}

.arrow{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;

  &::before{
    position: relative;
    content:'';
    width: 18px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/arrow-orange.svg");
  }
}