.has-margin-top-2-nav {
    margin-top: calc(2 * var(--bulma-navbar-height));
}

.has-margin-bottom-nav {
    margin-bottom: var(--bulma-navbar-height);
}

.has-padding-2p {
    padding: 2%;
}

.has-no-padding {
    padding: unset !important;
}

.has-padding-50px {
    padding: 50px !important;
}

/* =======================================
   Mobile  (max-width: 768px)
======================================= */
@media (max-width: 768px) {
  .px-1-mobile { padding-inline: 0.25rem !important; }
  .px-2-mobile { padding-inline: 0.5rem !important; }
  .px-3-mobile { padding-inline: 0.75rem !important; }
  .px-4-mobile { padding-inline: 1rem !important; }
  .px-5-mobile { padding-inline: 1.5rem !important; }
  .px-6-mobile { padding-inline: 3rem !important; }
  .px-7-mobile { padding-inline: 5rem !important; }
  .px-8-mobile { padding-inline: 10rem !important; }
  .px-9-mobile { padding-inline: 15rem !important; }
  .px-10-mobile { padding-inline: 20rem !important; }
}

/* =======================================
   Tablet  (min-width: 769px)
======================================= */
@media (min-width: 769px) {
  .px-1-tablet { padding-inline: 0.25rem !important; }
  .px-2-tablet { padding-inline: 0.5rem !important; }
  .px-3-tablet { padding-inline: 0.75rem !important; }
  .px-4-tablet { padding-inline: 1rem !important; }
  .px-5-tablet { padding-inline: 1.5rem !important; }
  .px-6-tablet { padding-inline: 3rem !important; }
  .px-7-tablet { padding-inline: 5rem !important; }
  .px-8-tablet { padding-inline: 10rem !important; }
  .px-9-tablet { padding-inline: 15rem !important; }
  .px-10-tablet { padding-inline: 20rem !important; }
}

/* =======================================
   Desktop  (min-width: 1024px)
======================================= */
@media (min-width: 1024px) {
  .px-1-desktop { padding-inline: 0.25rem !important; }
  .px-2-desktop { padding-inline: 0.5rem !important; }
  .px-3-desktop { padding-inline: 0.75rem !important; }
  .px-4-desktop { padding-inline: 1rem !important; }
  .px-5-desktop { padding-inline: 1.5rem !important; }
  .px-6-desktop { padding-inline: 3rem !important; }
  .px-7-desktop { padding-inline: 5rem !important; }
  .px-8-desktop { padding-inline: 10rem !important; }
  .px-9-desktop { padding-inline: 15rem !important; }
  .px-10-desktop { padding-inline: 20rem !important; }
}

/* =======================================
   Widescreen  (min-width: 1216px)
======================================= */
@media (min-width: 1216px) {
  .px-1-widescreen { padding-inline: 0.25rem !important; }
  .px-2-widescreen { padding-inline: 0.5rem !important; }
  .px-3-widescreen { padding-inline: 0.75rem !important; }
  .px-4-widescreen { padding-inline: 1rem !important; }
  .px-5-widescreen { padding-inline: 1.5rem !important; }
  .px-6-widescreen { padding-inline: 3rem !important; }
  .px-7-widescreen { padding-inline: 5rem !important; }
  .px-8-widescreen { padding-inline: 10rem !important; }
  .px-9-widescreen { padding-inline: 15rem !important; }
  .px-10-widescreen { padding-inline: 20rem !important; }
}

/* =======================================
   FullHD  (min-width: 1408px)
======================================= */
@media (min-width: 1408px) {
  .px-1-fullhd { padding-inline: 0.25rem !important; }
  .px-2-fullhd { padding-inline: 0.5rem !important; }
  .px-3-fullhd { padding-inline: 0.75rem !important; }
  .px-4-fullhd { padding-inline: 1rem !important; }
  .px-5-fullhd { padding-inline: 1.5rem !important; }
  .px-6-fullhd { padding-inline: 3rem !important; }
  .px-7-fullhd { padding-inline: 5rem !important; }
  .px-8-fullhd { padding-inline: 10rem !important; }
  .px-9-fullhd { padding-inline: 15rem !important; }
  .px-10-fullhd { padding-inline: 20rem !important; }
}