main.volunteersPage {
  padding: clamp(16px, 2.6vw, 32px);
}
main.volunteersPage .boxHolders {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
main.volunteersPage .boxHolders .textBox {
  background-color: #BCF0ED;
  border-radius: 20px;
  padding: 14px 10px;
}
main.volunteersPage .boxHolders .textBox h2.title {
  font-size: clamp(0.875rem, 0.386rem + 1.63vw, 1.625rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}
main.volunteersPage .boxHolders .textBox span.text {
  display: block;
  font-size: clamp(0.875rem, 0.712rem + 0.543vw, 1.125rem);
  font-weight: 300;
  line-height: 1.45;
}
main.volunteersPage .boxHolders .textBox.box2 {
  background-color: #00C1AF;
}
main.volunteersPage .boxHolders .joinWUF {
  display: flex;
  flex-flow: column nowrap;
  border-radius: 20px;
  color: white;
  padding: 20px 12px;
  text-align: center;
  background: url(/assets/i/shebekebg-m.webp) top center no-repeat #EE1E40;
}
main.volunteersPage .boxHolders .joinWUF .titles {
  padding-top: 40px;
}
main.volunteersPage .boxHolders .joinWUF h2.title {
  font-size: clamp(2.25rem, 2.087rem + 0.543vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
}
main.volunteersPage .boxHolders .joinWUF h3.subtitle {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
}
main.volunteersPage .boxHolders .joinWUF .buttonHolder {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0;
}
main.volunteersPage .boxHolders .joinWUF a.bt {
  display: block;
  width: 100%;
  max-width: 256px;
  margin: 0 auto;
  padding: 10px 8px;
  background-color: white;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: black;
  text-decoration: none;
  text-align: center;
}
main.volunteersPage .boxHolders .joinWUF span.text {
  display: block;
  padding-bottom: 48px;
  text-align: center;
  font-size: clamp(0.875rem, 0.712rem + 0.543vw, 1.125rem);
  line-height: 1.45;
  font-weight: 300;
}
main.volunteersPage .boxHolders IMG {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (min-width: 1216px) {
  main.volunteersPage .boxHolders {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr auto auto;
    grid-template-areas: "text1 mozaik pic2" "pic1 mozaik pic2" "pic1 mozaik text2";
  }
  main.volunteersPage .boxHolders .textBox {
    padding: 24px 40px;
  }
  main.volunteersPage .boxHolders .textBox.box1 {
    grid-area: text1;
  }
  main.volunteersPage .boxHolders .textBox.box2 {
    grid-area: text2;
  }
  main.volunteersPage .boxHolders .pic1 {
    grid-area: pic1;
    border-radius: 20px;
  }
  main.volunteersPage .boxHolders .mozaik {
    grid-area: mozaik;
  }
  main.volunteersPage .boxHolders .mozaik IMG {
    height: 100%;
    border-radius: 20px;
  }
  main.volunteersPage .boxHolders .joinWUF {
    grid-area: join;
    padding: 24px;
    background-image: url(/assets/i/shebekebg.webp);
  }
  main.volunteersPage .boxHolders .joinWUF .titles {
    padding-top: 172px;
  }
  main.volunteersPage .boxHolders .joinWUF h2.title {
    margin-bottom: 9px;
  }
  main.volunteersPage .boxHolders .joinWUF .buttonHolder {
    padding: 0 0 40px;
  }
  main.volunteersPage .boxHolders .joinWUF a.bt {
    max-width: 296px;
    padding: 18px 8px;
    transition: all 0.2s linear;
  }
  main.volunteersPage .boxHolders .joinWUF a.bt:HOVER {
    color: #FF4553;
  }
  main.volunteersPage .boxHolders .pic2 {
    grid-area: pic2;
    border-radius: 20px;
  }
}