/* Common layout utilities for marketing v2 pages (frames, grids, shared chrome). */

/* Gray border frame shell */
.frame-container-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E6EBEF;
  border-radius: 0;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

.frame-container-outer.pt {
  padding-top: 1px;
}

.frame-container-outer.pb {
  padding-bottom: 1px;
}

.frame-container-outer.pr {
  padding-right: 1px;
}

.frame-container-outer.pl {
  padding-left: 1px;
}

/* Inner rounded card */
.frame-container-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.frame-container-inner.br-tl {
  border-top-left-radius: 8px;
}

.frame-container-inner.br-tr {
  border-top-right-radius: 8px;
}

.frame-container-inner.br-bl {
  border-bottom-left-radius: 8px;
}

.frame-container-inner.br-br {
  border-bottom-right-radius: 8px;
}

.frame-container-inner.br-l {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.frame-container-inner.br-r {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.frame-container-inner.br-t {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.frame-container-inner.br-b {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Grids with inner gray borders */
.frame-grid {
  display: grid;
  gap: 1px;
  border: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-radius: 9px;
}

.frame-grid-top {
  display: grid;
  gap: 1px;
  border: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.frame-grid-bottom {
  display: grid;
  gap: 1px;
  border-left: 1px solid #e6ebef;
  border-right: 1px solid #e6ebef;
  border-bottom: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

.frame-square {
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-dots {
  background-image: radial-gradient(circle, #e6ebef 1px, transparent 1px);
  background-size: 8px 8px;
  background-position: 0 0;
}

.testimonial-spacer-cell {
  width: 16px;
  height: 16px;
}

.testimonial-spacer-fill {
  height: 16px;
}

.testimonial-side-rail {
  width: 16px;
}

@media (width >= 576px) {
  .testimonial-spacer-cell {
    width: 32px;
    height: 32px;
  }

  .testimonial-spacer-fill {
    height: 32px;
  }

  .testimonial-side-rail {
    width: 32px;
  }
}