/* ===== RESET & BASE STYLES ===== */
.phuib_layouteightytwenty {
  display: block;
  width: 100%;
  padding: var(--general-padding, 0);
  box-sizing: border-box;
  background-color: var(--section-bg, transparent);
  position: relative;
  overflow: hidden;
}

/* ===== LAYOUT CONTAINER ===== */
.phuib_layouteightytwenty .container-row {
  max-width: var(--max-width, 1160px);
  padding: 0 var(--site-padding, 20px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.phuib_layouteightytwenty .layout-container {
  display: flex;
  width: 100%;
  gap: var(--grid-gutter-width, 30px);
}

.phuib_layouteightytwenty .layout-row {
  display: grid;
  width: 100%;
  grid-template-columns: calc(var(--left-width, 80%) - (var(--grid-gutter-width, 30px) / 2)) calc(
      var(--right-width, 20%) - (var(--grid-gutter-width, 30px) / 2)
    );
  gap: var(--grid-gutter-width, 30px);
}

.phuib_layouteightytwenty .layout-column {
  position: relative;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.phuib_layouteightytwenty .layout-heading-description * {
  margin-bottom: 0;
}
.phuib_layouteightytwenty .layout-heading-title * {
  margin-bottom: 0;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
/* Desktop styles (min-width: 1025px) - base styles apply */
.phuib_layouteightytwenty .container-row {
  padding: 0 var(--site-padding, 30px);
}

.phuib_layouteightytwenty .layout-heading-description {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
}

/* Tablet styles (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  .phuib_layouteightytwenty .layout-container {
    gap: var(--grid-gutter-width, 25px);
  }

  .phuib_layouteightytwenty .layout-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gutter-width, 25px);
  }

  .phuib_layouteightytwenty .container-row {
    padding: 0 var(--site-padding, 25px);
  }

  .phuib_layouteightytwenty .layout-heading-description {
    font-size: 1.25rem;
    margin-bottom: 2.25rem;
  }
}

/* Mobile styles (max-width: 768px) */
@media screen and (max-width: 768px) {
  .phuib_layouteightytwenty .layout-container {
    gap: var(--grid-gutter-width, 20px);
  }

  .phuib_layouteightytwenty .layout-row {
    grid-template-columns: 1fr;
    gap: var(--grid-gutter-width, 20px);
  }

  .phuib_layouteightytwenty .container-row {
    padding: 0 var(--site-padding, 15px);
  }

  .phuib_layouteightytwenty .layout-heading-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
}