.rowegroup__elementalcontainer__model__elementcontainer{
    margin-bottom: 0;
}

.py-1{
    padding-top: 40px;
    padding-bottom: 40px;
}
.py-2{
    padding-top: 60px;
    padding-bottom: 60px;
}
.py-3{
    padding-top: 80px;
    padding-bottom: 80px;
}

.px-1{
    padding-left: 40px;
    padding-right: 40px;
}
.px-2{
    padding-left: 60px;
    padding-right: 60px;
}
.px-3{
   padding-left: 80px;
    padding-right: 80px;
}

.my-1{
   margin-bottom:20px;
}
.my-2{
  margin-bottom:40px;
}
.my-3{
   margin-bottom:60px;
}

/* Theme wrappers: set defaults */
.light-container-theme { color: #111; }
.dark-container-theme  { color: #fff; }

/* Inherit by default (covers p, headings, labels unless overridden elsewhere) */
.light-container-theme :where(p,h1,h2,h3,h4,h5,h6,label) { color: inherit; }
.dark-container-theme  :where(p,h1,h2,h3,h4,h5,h6,label) { color: inherit; }

/* Don't force theme color inside these components */
.light-container-theme :where(.card, .hero-section, .tabs, .accordion, .callout),
.dark-container-theme  :where(.card, .hero-section, .tabs, .accordion, .callout) {
  color: initial; /* resets to UA/default so the component can define its own */
}

/* Also protect their typography inside */
.light-container-theme :where(.card, .hero-section, .tabs, .accordion, .callout) :where(p,h1,h2,h3,h4,h5,h6,label),
.dark-container-theme  :where(.card, .hero-section, .tabs, .accordion, .callout) :where(p,h1,h2,h3,h4,h5,h6,label) {
  color: inherit;
}

@media only screen and (max-width: 960px){

.px-2{
    padding-left: 40px;
    padding-right: 40px;
}
.px-3{
   padding-left: 40px;
    padding-right: 40px;
}

.my-3{
   margin-bottom:40px;
}

}
@media only screen and (max-width: 640px){

.px-1{
    padding-left: 20px;
    padding-right: 20px;
}
.px-2{
    padding-left: 20px;
    padding-right: 20px;
}
.px-3{
   padding-left: 20px;
    padding-right: 20px;
}

.my-2{
  margin-bottom:20px;
}
.my-3{
   margin-bottom:40px;
}

}