.explore-tabs {
  padding-top:60px;
  padding-bottom:60px;
}

.explore-tabs .headings .heading {
  color:var(--cutler);
  font-family:var(--text-serif);
  font-weight:700;
  font-size:48px;
  text-align:center;
  padding:0;
  margin:0 0 30px;
}

.explore-tabs .headings .heading:has(+ .subheading) {
  margin:0 0 15px;
}

.explore-tabs .headings .subheading {
  font-family:var(--text-sans);
  font-size:18px;
  font-weight:700;
  text-align:center;
  color:var(--cutler);
  display:block;
  margin:0 0 30px;
}

.explore-tabs .tabs {
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  max-width:unset;
  padding:unset;
}

@media (min-width: 768px) {
  .explore-tabs .tabs {
    flex-wrap:nowrap;
  }
}

.explore-tabs .tabs .images-container {
  flex-basis:100%;
  align-self:flex-start;
  padding:30px;
  background:var(--trillium);
  position:sticky;
  box-shadow:0px 8px 8px rgba(0,0,0,.25);
  top:0;
  z-index:2;
}

@media (min-width: 768px) {
  .explore-tabs .tabs .images-container {
    flex-basis:calc(60% - 60px);
    padding:30px 30px 30px 0;
    box-shadow:none;
  }
}

.explore-tabs .tabs .images-container .explore-image img {
  opacity:0;
  transition:var(--transition-default);
  aspect-ratio:3 / 2;
  width:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  height:100%;
}

.explore-tabs .tabs .images-container .explore-image.active img {
  opacity:1;
}

.explore-tabs .tabs .text-container {
  flex-basis:calc(100% - 45px);
  margin-top:0;
}

@media (min-width: 768px) {
  .explore-tabs .tabs .text-container {
    flex-basis:40%;
  }
}

.explore-tabs .tabs .text-container .button-text {
  display:flex;
  flex-wrap:wrap;
}

.explore-tabs .tabs .text-container button.tab {
  flex-basis:100%;
  padding:30px;
  cursor:pointer;
  position:relative;
  font-family:var(--text-display);
  font-weight:700;
  font-size:22px;
  line-height:26px;
  color:var(--cutler);
  display:inline-block;
  width:100%;
  text-align:left;
  outline-offset:-2px;
  transition:var(--transition-default);
}

.explore-tabs .tabs .text-container button.tab:is(:hover, :focus) {
  color:var(--under-the-elms);
}

.explore-tabs .tabs .text-container button.tab:not(.active):focus {
  outline:2px solid #85b7d1;
}

.explore-tabs .tabs .text-container button.tab.active {
  background:var(--trillium);
  color:var(--under-the-elms);
  border-bottom:0;
}

.explore-tabs .tabs .text-container button.tab:after {
  content: "";
  background-color: var(--light-gray);
  width: 5px;
  height: 100%;
  position: absolute;
  right: -20px;
  top: 0;
}

.explore-tabs .tabs .text-container button.tab.active:after {
  background-color:var(--under-the-elms);
}

.explore-tabs .tabs .text-container .explore-text {
  background:var(--trillium);
  padding:0 30px 30px 30px;
  width:100%;
  position:relative;
}

.explore-tabs .tabs .text-container .explore-text:after {
  content: "";
  background-color: var(--light-gray);
  width: 5px;
  height: 100%;
  position: absolute;
  right: -20px;
  top: 0;
}

.explore-tabs .tabs .text-container .explore-text.active:after {
  background-color:var(--under-the-elms);
}

.explore-tabs .tabs .text-container .explore-text p {
  margin-top:0;
  font-family:var(--text-sans);
  font-size:18px;
  line-height:27px;
}

.explore-tabs .tabs .text-container .explore-text a:not(.action) {
  font-size:18px;
  color:var(--cutler);
  display:inline;
  padding:0;
  text-decoration:underline;
  transition:var(--transition-default);
}

.explore-tabs .tabs .text-container .explore-text a:not(.action):hover {
  background:transparent;
  color:var(--under-the-elms);
}

.explore-tabs .tabs .text-container .explore-text a.action {
  display:block;
  margin-top:15px;
  color:var(--cutler);
  padding:0;
  font-size:18px;
  font-weight:bold;
  text-decoration:underline;
  display:inline-block;
  transition:var(--transition-default);
}

.explore-tabs .tabs .text-container .explore-text a.action:is(:hover, :focus) {
  background-color:transparent;
  color:var(--under-the-elms);
}