.tabs {
  width: 100%;
  margin: 0 auto;
}

.tabs [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
    justify-content: center;
}

.tabs [role="tab"] {
  flex: 1 0 auto;
  padding:18px 30px 18px 40px;
  background-color:#ebe1d9;
  border:1px solid #af9f94;
  border-radius:10px;
  transition: all 0.3s ease 0s;
    position: relative;
    font-weight: 500;
    font-size:1.1rem;
}

.tabs [role="tab"]:before {
    content: "•";
    color: #af9f94;
    position: absolute;
    left: 20px;
    top: 7px;
    font-size: 2rem;
    
}

.tabs [role="tab"]:hover {
  cursor: pointer;
  border:1px solid #af9f94;
  color: #fff;
  transition: all 0.3s ease 0s;
    background-color: #af9f94;
}

.tabs [role="tab"][aria-selected="true"] {
  border:1px solid #af9f94;
  color:#fff;
  position: relative;
    background-color: #af9f94;
}

.tabs [role="tab"]:hover:before,
.tabs [role="tab"][aria-selected="true"]:before {
    color: #f46967;
}

.tabs [role="tabpanel"] {
  /*min-height: 300px;*/
  padding: 0px;
  margin-top: 50px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease 0s;
}

.tabs [role="tabpanel"]:not([tabindex]) {
  display: none;
}

.tabpanel-content {
  display: flex;
  flex-direction: column;
  gap:0px;
}

@media (min-width: 660px) {
  .tabs [role="tab"] {
    flex: unset;
  }
}

@media (min-width: 768px) {
  .tabpanel-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
  }
}