/* Misc */
section {
  padding-block: 2rem;
}

.oximetria-title {
  text-align: start;
}

.oximetria-title-center {
  text-align: center;
}

.oximetria-title h2,
.oximetria-title-center h2 {
  font-size: 2.5rem;
}

.oximetria-title p,
.oximetria-title-center p {
  color: var(--dark);
}

@media (max-width: 992px) {
  .oximetria-title h2,
  .oximetria-title-center h2 {
    font-size: 2rem;
  }
}

/* Hero */
#oximetria-header {
  text-align: start;
}

#oximetria-header h1 {
  font-size: 1rem;
}

#oximetria-header h2 {
  font-size: 2rem;
}

/* Proceso */
#proceso .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.oximetria-proceso-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(4, 1fr);
  margin-block: 2rem;
  gap: 1.5rem;
}

.oximetria-proceso-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 2rem;
  row-gap: 0.5rem;
  border-radius: 2rem;
  box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.15);
}

.oximetria-proceso-item::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  transform: translate(50%, -25%);
  width: 100px;
  height: 100px;
  background-color: var(--primario);
  opacity: 0.5;
  border-radius: 100%;
}

.oximetria-proceso-item::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  transform: translate(50%, 25%);
  width: 50px;
  height: 50px;
  background-color: var(--primario);
  opacity: 0.5;
  border-radius: 100%;
}

.oximetria-proceso-item span {
  color: var(--primario);
  font-size: 3rem;
  font-weight: 900;
}

.oximetria-proceso-item h3 {
  color: var(--primario);
  font-size: 1.875rem;
}

@media (max-width: 992px) {
  .oximetria-proceso-container {
    grid-template-columns: 1fr;
  }

  .oximetria-proceso-item {
    justify-content: center;
    text-align: center;
  }
}