:root {
  --tabs-tab-height: 6rem;
}
.tabs-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100% !important;
  padding: 0 var(--os-section-gutter);
  background-color: var(--wp--preset--color--base-ultra-light);
  margin-top: var(--tabs-tab-height);
}
.tabs-wrapper {
  width: 100%;
  max-width: var(--wp--style--global--wide-size) !important;
  margin: 0 auto;
  box-sizing: border-box;
}
.tabs {
  display: flex;
  position: relative;
  top: calc(-1 * var(--tabs-tab-height));
}

.tabs button {
  background: none;
  border: none;
  border-radius: var(--os-radius-xs) var(--os-radius-xs)  0 0;
  padding: 12px 24px;
  height: var(--tabs-tab-height);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  background-color: var(--wp--preset--color--base-light);
  color: var(--wp--preset--color--base-);
  transition: var(--os-transition);
  font-family: var(--wp--preset--font-family--montserrat);
}
.tabs button:hover {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--base-light);
}

.tabs button[aria-selected="true"] {
  border-bottom-color: #007bff;
  background-color: var(--wp--preset--color--base-ultra-light);
  color: var(--wp--preset--color--base-dark);
}

.tab-panels {
  padding-bottom: var(--tabs-tab-height);
}

[role="tabpanel"] {
  display: none;
}

[role="tabpanel"]:not([hidden]) {
  display: block;
}


.tab-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--column-gap);
}
.tab-content-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tab-columns img {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  border-radius: var(--os-radius-xs);
}
@media screen and (max-width: 768px) {
  .tab-columns {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--wp--preset--spacing--grid-gap);
  }
  .tabs button {
    font-size: 14px;
  }
}