.on-container {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 1.5rem;
}

.on-container-i {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.on-box {}

.on-item6 {
  grid-column: 1 / 17;
  background: #0f65e6;
  color: #f9fdfe;
  font-weight: bold;
  text-align: center;
  padding: 1.5rem;
}


.on-item4 {
  grid-column: 2 / 7;
  position: relative;
}

.on-item4 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


.on-item5 {
  grid-column: 7 / 15;
  padding: 3rem 0rem;
}

.on-item5 h2 {
  text-align: left;
}


.on-item4,
.on-item5 {
  align-self: center;
}



@media (max-width: 991px) {

  .on-container {
    grid-template-columns: 2.5fr 1fr;
    grid-template-areas:
      "item6 item6"
      "item4 item4"
      "item5 item5";
  }


  .on-item4 {
    grid-area: item4;
  }


  .on-item5 {
    grid-area: item5;
  }


  .on-item5 h2 {
    text-align: left;
  }


  .on-item6 {
    grid-area: item6;
    padding: 1.5rem;
  }

}

/* =====================================================
   ON CARD
===================================================== */

.on-card {
  width: 100%;
  border-radius: 5rem;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  border: 1px solid #d5f1f1;
}


/* =====================================================
   IMAGE
===================================================== */

.on-img {
  aspect-ratio: 1 / 1;
  width: 75%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.on-img img {
  width: 80%;
  height: 80%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: solid 1.25rem #f9fdfe;
  outline: solid 0.5rem #d5f1f1;
  outline-offset: 0.5rem;
}


/* =====================================================
   CONTENT
===================================================== */

.on-content {
  padding: 1.5rem 3rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  text-align: center;
}

.on-content h3,
.on-content h4,
.on-content p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}


/* BUTTON */
.p-btn {
  padding: 10px;

  border-radius: 3rem;
  border: 1px solid #d5f1f1;

  background-color: #d5f1f1;
  color: #09171a;

  text-decoration: none;

  margin-top: auto;

  transition: all .5s ease;

  text-transform: uppercase;
  font-weight: bold;
}

.p-btn:hover {
  background-color: #d5f1f1;
  border-color: #d5f1f1;
  color: #2cb9bb;
}


/* =====================================================
   IMAGE SMALL
===================================================== */

.on-img-s {
  aspect-ratio: 1 / 1;
  width: 60%;
  margin: 1.5rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.on-img-s img {
  object-fit: cover;
  display: block;
}


/* =====================================================
   CONTENT SMALL
===================================================== */

.on-content-s {
  padding: 1.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  text-align: center;
}

.on-content-s h3,
.on-content-s h4,
.on-content-s p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}


/* BUTTON SMALL – VZHLED ZŮSTÁVÁ Z .p-btn */

.on-content-s .p-btn {
  display: block;
  width: calc(100% - 3rem);
  margin: 0 1.5rem 1.5rem 1.5rem !important;
  box-sizing: border-box;
  text-align: center;
}