/* MOBILE DEVICES ( <= 678px ) */
.hwdi-main-30 {
   width: 100%;
   height: auto;
   padding-inline: var(--gutter);
   max-width: var(--site-max-width);
}

.hwdi-image-30 {
   overflow: auto;
   position: relative;
   block-size: fit-content;
}

.hwdi-img-30,
.hwdi-full-img-30 {
   width: 100%;
   height: auto;
   border: none;
   display: block;
   object-fit: cover;
   object-position: center;
}

.hwdi-section-31 {
   margin: 0;
   border: none;
   padding-top: 0;
   padding-bottom: 0;
}

.hwdi-image-30,
.hwdi-image-31 {
   overflow: auto;
   position: relative;
   block-size: fit-content;
}

.hwdi-image-31 {
   border-top: 1px solid var(--black);
   border-left: 1px solid var(--black);
   border-right: 1px solid var(--black);
}

.dual-section-30,
.dual-section-31 {
   margin: 0;
   border: none;
   padding-top: 0;
   padding-bottom: 0;
}

.dual-grid-30 {
   display: flex;
   margin-inline: auto;
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
}

.dual-left-column-30 {
   width: 45%;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--black);
   border-left: 1px solid var(--black);
   border-right: 1px solid var(--black);
   border-bottom: none;
}

.dual-content-30 {
   padding: 15px;
   position: relative;
   border-bottom: none;
   max-inline-size: 100%;
}

.left-description-30,
.right-description-30 {
   font-size: 10px;
   line-height: 1.1em;
   color: var(--black);
   font-family: 'CenturyReg';
}

.dual-right-column-30 {
   width: 55%;
   height: auto;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--black);
   border-left: none;
   border-right: 1px solid var(--black);
   border-bottom: none;
}

.dual-right-image-30,
.dual-left-image-30 {
   overflow: auto;
   position: relative;
   block-size: fit-content;
}

.dual-img-30 {
   width: 100%;
   height: auto;
   border: none;
   display: block;
   max-height: 600px;
   object-fit: cover;
   object-position: center;
}

.dual-left-column-31 {
   width: 55%;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--black);
   border-left: 1px solid var(--black);
   border-right: 1px solid var(--black);
   border-bottom: none;
}

.dual-right-column-31 {
   width: 45%;
   position: relative;
   flex-direction: column;
   justify-content: space-between;
   border-top: 1px solid var(--black);
   border-left: none;
   border-right: 1px solid var(--black);
   border-bottom: none;
}

/* DESKTOP DEVICES ( > 678px ) */
@media screen and (min-width: 678px) {
   .hwdi-main-30 {
      padding-inline: var(--gutter-2);
   }
   
   .dual-content-30 {
      padding: 30px 60px 30px 30px;
   }

   .left-description-30,
   .right-description-30 {
      font-size: 16px;
   }
}