/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.ad3-wrap {
  /** Padding de 5 en 5 fins a 150 *****/
  /* Configuració de columnes per pantalles grans */
  /* Responsivitat per pantalles menors de 968px */
  /* Responsivitat per pantalles menors de 500px */
  /* Classe per bloquejar l'scroll */
}
.ad3-wrap .align-center {
  text-align: center;
}
.ad3-wrap .align-left {
  text-align: left;
}
.ad3-wrap .align-right {
  text-align: right;
}
.ad3-wrap .pu-5 {
  padding-top: 5px !important;
}
.ad3-wrap .pd-5 {
  padding-bottom: 5px !important;
}
.ad3-wrap .pl-5 {
  padding-left: 5px !important;
}
.ad3-wrap .pr-5 {
  padding-right: 5px !important;
}
.ad3-wrap .pu-10 {
  padding-top: 10px !important;
}
.ad3-wrap .pd-10 {
  padding-bottom: 10px !important;
}
.ad3-wrap .pl-10 {
  padding-left: 10px !important;
}
.ad3-wrap .pr-10 {
  padding-right: 10px !important;
}
.ad3-wrap .pu-15 {
  padding-top: 15px !important;
}
.ad3-wrap .pd-15 {
  padding-bottom: 15px !important;
}
.ad3-wrap .pl-15 {
  padding-left: 15px !important;
}
.ad3-wrap .pr-15 {
  padding-right: 15px !important;
}
.ad3-wrap .pu-20 {
  padding-top: 20px !important;
}
.ad3-wrap .pd-20 {
  padding-bottom: 20px !important;
}
.ad3-wrap .pl-20 {
  padding-left: 20px !important;
}
.ad3-wrap .pr-20 {
  padding-right: 20px !important;
}
.ad3-wrap .pu-25 {
  padding-top: 25px !important;
}
.ad3-wrap .pd-25 {
  padding-bottom: 25px !important;
}
.ad3-wrap .pl-25 {
  padding-left: 25px !important;
}
.ad3-wrap .pr-25 {
  padding-right: 25px !important;
}
.ad3-wrap .pu-30 {
  padding-top: 30px !important;
}
.ad3-wrap .pd-30 {
  padding-bottom: 30px !important;
}
.ad3-wrap .pl-30 {
  padding-left: 30px !important;
}
.ad3-wrap .pr-30 {
  padding-right: 30px !important;
}
.ad3-wrap .pu-35 {
  padding-top: 35px !important;
}
.ad3-wrap .pd-35 {
  padding-bottom: 35px !important;
}
.ad3-wrap .pl-35 {
  padding-left: 35px !important;
}
.ad3-wrap .pr-35 {
  padding-right: 35px !important;
}
.ad3-wrap .pu-40 {
  padding-top: 40px !important;
}
.ad3-wrap .pd-40 {
  padding-bottom: 40px !important;
}
.ad3-wrap .pl-40 {
  padding-left: 40px !important;
}
.ad3-wrap .pr-40 {
  padding-right: 40px !important;
}
.ad3-wrap .pu-45 {
  padding-top: 45px !important;
}
.ad3-wrap .pd-45 {
  padding-bottom: 45px !important;
}
.ad3-wrap .pl-45 {
  padding-left: 45px !important;
}
.ad3-wrap .pr-45 {
  padding-right: 45px !important;
}
.ad3-wrap .pu-50 {
  padding-top: 50px !important;
}
.ad3-wrap .pd-50 {
  padding-bottom: 50px !important;
}
.ad3-wrap .pl-50 {
  padding-left: 50px !important;
}
.ad3-wrap .pr-50 {
  padding-right: 50px !important;
}
.ad3-wrap .pu-55 {
  padding-top: 55px !important;
}
.ad3-wrap .pd-55 {
  padding-bottom: 55px !important;
}
.ad3-wrap .pl-55 {
  padding-left: 55px !important;
}
.ad3-wrap .pr-55 {
  padding-right: 55px !important;
}
.ad3-wrap .pu-60 {
  padding-top: 60px !important;
}
.ad3-wrap .pd-60 {
  padding-bottom: 60px !important;
}
.ad3-wrap .pl-60 {
  padding-left: 60px !important;
}
.ad3-wrap .pr-60 {
  padding-right: 60px !important;
}
.ad3-wrap .pu-65 {
  padding-top: 65px !important;
}
.ad3-wrap .pd-65 {
  padding-bottom: 65px !important;
}
.ad3-wrap .pl-65 {
  padding-left: 65px !important;
}
.ad3-wrap .pr-65 {
  padding-right: 65px !important;
}
.ad3-wrap .pu-70 {
  padding-top: 70px !important;
}
.ad3-wrap .pd-70 {
  padding-bottom: 70px !important;
}
.ad3-wrap .pl-70 {
  padding-left: 70px !important;
}
.ad3-wrap .pr-70 {
  padding-right: 70px !important;
}
.ad3-wrap .pu-75 {
  padding-top: 75px !important;
}
.ad3-wrap .pd-75 {
  padding-bottom: 75px !important;
}
.ad3-wrap .pl-75 {
  padding-left: 75px !important;
}
.ad3-wrap .pr-75 {
  padding-right: 75px !important;
}
.ad3-wrap .pu-80 {
  padding-top: 80px !important;
}
.ad3-wrap .pd-80 {
  padding-bottom: 80px !important;
}
.ad3-wrap .pl-80 {
  padding-left: 80px !important;
}
.ad3-wrap .pr-80 {
  padding-right: 80px !important;
}
.ad3-wrap .pu-85 {
  padding-top: 85px !important;
}
.ad3-wrap .pd-85 {
  padding-bottom: 85px !important;
}
.ad3-wrap .pl-85 {
  padding-left: 85px !important;
}
.ad3-wrap .pr-85 {
  padding-right: 85px !important;
}
.ad3-wrap .pu-90 {
  padding-top: 90px !important;
}
.ad3-wrap .pd-90 {
  padding-bottom: 90px !important;
}
.ad3-wrap .pl-90 {
  padding-left: 90px !important;
}
.ad3-wrap .pr-90 {
  padding-right: 90px !important;
}
.ad3-wrap .pu-95 {
  padding-top: 95px !important;
}
.ad3-wrap .pd-95 {
  padding-bottom: 95px !important;
}
.ad3-wrap .pl-95 {
  padding-left: 95px !important;
}
.ad3-wrap .pr-95 {
  padding-right: 95px !important;
}
.ad3-wrap .pu-100 {
  padding-top: 100px !important;
}
.ad3-wrap .pd-100 {
  padding-bottom: 100px !important;
}
.ad3-wrap .pl-100 {
  padding-left: 100px !important;
}
.ad3-wrap .pr-100 {
  padding-right: 100px !important;
}
.ad3-wrap .pu-105 {
  padding-top: 105px !important;
}
.ad3-wrap .pd-105 {
  padding-bottom: 105px !important;
}
.ad3-wrap .pl-105 {
  padding-left: 105px !important;
}
.ad3-wrap .pr-105 {
  padding-right: 105px !important;
}
.ad3-wrap .pu-110 {
  padding-top: 110px !important;
}
.ad3-wrap .pd-110 {
  padding-bottom: 110px !important;
}
.ad3-wrap .pl-110 {
  padding-left: 110px !important;
}
.ad3-wrap .pr-110 {
  padding-right: 110px !important;
}
.ad3-wrap .pu-115 {
  padding-top: 115px !important;
}
.ad3-wrap .pd-115 {
  padding-bottom: 115px !important;
}
.ad3-wrap .pl-115 {
  padding-left: 115px !important;
}
.ad3-wrap .pr-115 {
  padding-right: 115px !important;
}
.ad3-wrap .pu-120 {
  padding-top: 120px !important;
}
.ad3-wrap .pd-120 {
  padding-bottom: 120px !important;
}
.ad3-wrap .pl-120 {
  padding-left: 120px !important;
}
.ad3-wrap .pr-120 {
  padding-right: 120px !important;
}
.ad3-wrap .pu-125 {
  padding-top: 125px !important;
}
.ad3-wrap .pd-125 {
  padding-bottom: 125px !important;
}
.ad3-wrap .pl-125 {
  padding-left: 125px !important;
}
.ad3-wrap .pr-125 {
  padding-right: 125px !important;
}
.ad3-wrap .pu-130 {
  padding-top: 130px !important;
}
.ad3-wrap .pd-130 {
  padding-bottom: 130px !important;
}
.ad3-wrap .pl-130 {
  padding-left: 130px !important;
}
.ad3-wrap .pr-130 {
  padding-right: 130px !important;
}
.ad3-wrap .pu-135 {
  padding-top: 135px !important;
}
.ad3-wrap .pd-135 {
  padding-bottom: 135px !important;
}
.ad3-wrap .pl-135 {
  padding-left: 135px !important;
}
.ad3-wrap .pr-135 {
  padding-right: 135px !important;
}
.ad3-wrap .pu-140 {
  padding-top: 140px !important;
}
.ad3-wrap .pd-140 {
  padding-bottom: 140px !important;
}
.ad3-wrap .pl-140 {
  padding-left: 140px !important;
}
.ad3-wrap .pr-140 {
  padding-right: 140px !important;
}
.ad3-wrap .pu-145 {
  padding-top: 145px !important;
}
.ad3-wrap .pd-145 {
  padding-bottom: 145px !important;
}
.ad3-wrap .pl-145 {
  padding-left: 145px !important;
}
.ad3-wrap .pr-145 {
  padding-right: 145px !important;
}
.ad3-wrap .pu-150 {
  padding-top: 150px !important;
}
.ad3-wrap .pd-150 {
  padding-bottom: 150px !important;
}
.ad3-wrap .pl-150 {
  padding-left: 150px !important;
}
.ad3-wrap .pr-150 {
  padding-right: 150px !important;
}
.ad3-wrap .grid-container {
  display: grid;
  gap: 1rem;
  /* espai entre columnes i files */
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.ad3-wrap .grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.ad3-wrap .grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ad3-wrap .grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.ad3-wrap .grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.ad3-wrap .grid-6 {
  grid-template-columns: repeat(6, 1fr);
}
.ad3-wrap .item {
  background-color: #f0f0f0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
@media (max-width: 1200px) {
  .ad3-wrap {
    /* Tots passen a 2 columnes */
    /* Opcionalment, també pots definir .grid-6 a 3 columnes */
  }
  .ad3-wrap .grid-3,
  .ad3-wrap .grid-4,
  .ad3-wrap .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ad3-wrap .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 750px) {
  .ad3-wrap .grid-2,
  .ad3-wrap .grid-3,
  .ad3-wrap .grid-4,
  .ad3-wrap .grid-5,
  .ad3-wrap .grid-6 {
    grid-template-columns: 1fr;
  }
}
.ad3-wrap .image-resposive {
  width: 100%;
  /* Ocupa tot l'ample del contenidor */
  height: auto;
  /* Manté la proporció de la imatge */
  display: block;
  /* Evita espais extra al voltant de la imatge */
}
.ad3-wrap .image-square {
  width: 100%;
  /* S'adapta a l'amplada del contenidor */
  aspect-ratio: 1 / 1;
  /* Fa que l'alçada sigui igual a l'amplada, creant un quadrat */
  object-fit: cover;
  /* Escala i retalla la imatge per omplir el quadrat sense deformacions */
  display: block;
}
.ad3-wrap .image-4-3 {
  width: 100%;
  /* S'adapta a l'amplada del contenidor */
  aspect-ratio: 4 / 3;
  /* Manté la relació d'aspecte de 4:3 */
  object-fit: cover;
  /* Escala i retalla la imatge si és necessari per omplir el contenidor */
  display: block;
}
.ad3-wrap .hidden {
  display: none;
}
.ad3-wrap .hidden {
  opacity: 0;
}
.ad3-wrap [x-cloak] {
  display: none !important;
}
.ad3-wrap .overflow-hidden {
  overflow: hidden;
}
/*# sourceMappingURL=frontend-base.css.map */