.javali-new-cke-templates {
  display: grid;
  justify-content: center;
  gap: 1.5rem;
  --elements-width: 205px;
}

.javali-new-cke-templates .new-element-item-containner {
  color: var(--color-4);
}

.javali-new-cke-templates .new-element-item-containner {
  border-color: var(--color-4);
}

.new-element-item-containner {
  width: var(--elements-width);
  height: var(--elements-width);
  text-align: center;
  padding-top: 18%;
  position: relative;
  box-sizing: border-box;
  border: 2px solid black;
}

.javali-new-cke-templates[data-number="1"] {
  grid-template-columns: var(--elements-width);
}

.javali-new-cke-templates[data-number="2"] {
  grid-template-columns: var(--elements-width) var(--elements-width);
}

.javali-new-cke-templates[data-number="3"] {
  grid-template-columns: var(--elements-width) var(--elements-width) var(
      --elements-width
    );
}

.javali-new-cke-templates[data-number="4"] {
  --elements-width: 160px;
  grid-template-columns:
    var(--elements-width) var(--elements-width) var(--elements-width)
    var(--elements-width);
}

.javali-new-cke-templates[data-number="5"] {
  --elements-width: 135px;
  gap: 0.5rem;
  grid-template-columns:
    var(--elements-width) var(--elements-width) var(--elements-width)
    var(--elements-width) var(--elements-width);
}

.javali-new-cke-templates[data-type="circle"] .new-element-item-containner {
  border-radius: 50%;
}

.new-element-item {
  position: absolute;
  top: 20%;
  left: 0;
  bottom: 20%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--text-font);
  gap: 0.5rem;
}

.new-template-top-row,
.new-template-bottom-row {
  font-size: var(--font-body-medium) !important;
  line-height: var(--line-height-medium) !important;
}

.new-template-middle-row span {
  line-height: 1.1em !important;
  display: block;
}

.new-template-middle-row {
  font-size: 2rem !important;
  line-height: 2.375rem !important;
  padding: 0;
  font-family: var(--title-font);
}

body.node-type-story-item .section-full .javali-new-cke-templates {
  width: 1120px;
  margin: auto;
}

@media (max-width: 1119px) {
  .javali-new-cke-templates {
    --elements-width: 120px;
  }

  .new-template-top-row,
  .new-template-bottom-row {
    font-size: var(--font-body-small) !important;
  }

  .new-element-item {
    gap: 0;
  }
}
/* mobile */

@media (max-width: 767px) {
  .javali-new-cke-templates,
  .javali-new-cke-templates[data-number="4"] {
    --elements-width: 150px;
    gap: 20px;
    width: 100%;
    grid-template-columns: 150px 150px !important;
  }
  /* .new-element-item-containner {
    width: 140px;
    height: 140px;
  } */

  .new-template-top-row,
  .new-template-bottom-row {
    font-size: var(--font-body-medium) !important;
    line-height: 1rem !important;
  }

  /* .javali-new-cke-templates {
    width: 100%;
    grid-template-columns: 140px 140px !important;
    gap: 40px;
  } */
}

.ck-img-side-by-side .ck-img-left-img,
.ck-img-side-by-side .ck-img-right-img {
  width: 50%;
  flex: auto;
  float: left;
}

.ck-img-side-by-side .ck-img-left-img {
  margin-right: 5px;
}

.ck-img-side-by-side .ck-img-right-img {
  margin-left: 5px;
}

/* alterações OAR */

.oar-site .javali-new-cke-templates .new-element-item {
  justify-content: space-around;
  -ms-flex-pack: distribute;
}

.oar-site .javali-new-cke-templates .new-template-middle-row {
  padding: 0;
}

.oar-site .javali-new-cke-templates .new-template-middle-row span {
  line-height: 1.1em !important;
  display: block;
}

.oar-site .javali-new-cke-templates .new-template-top-row span,
.oar-site .javali-new-cke-templates .new-template-bottom-row span {
  line-height: 120%;
  display: block;
}

.oar-site
  .javali-new-cke-templates[data-number="2"]
  .new-element-item-containner
  .new-template-middle-row {
  padding: 5px 0;
}

@media screen and (min-width: 1921px) {
  .javali-new-cke-templates,
  .javali-new-cke-templates[data-number="4"],
  .javali-new-cke-templates[data-number="5"] {
    --elements-width: 285px;
  }

  .two-columns .javali-new-cke-templates[data-number="4"],
  .two-columns .javali-new-cke-templates[data-number="5"] {
    grid-template-columns: repeat(3, var(--elements-width));
  }

  .javali-new-cke-templates {
    margin: 1.5rem 0;
  }
}

@media screen and (min-width: 3441px) {
  .javali-new-cke-templates,
  .javali-new-cke-templates[data-number="4"],
  .javali-new-cke-templates[data-number="5"] {
    --elements-width: 427.5px;
    gap: 2.25rem;
  }

  .new-template-middle-row {
    font-size: 3rem !important;
    line-height: 3.5rem !important;
  }

  .javali-new-cke-templates {
    margin: 2.25rem 0;
  }
}