#tabs {
    width:100%;
}
.tab_labels {
    display: flex;
    border-bottom:3px solid var(--earth-color)
}
.tab_labels label {
    display: flex;
    flex:1;
    align-content: center;
    justify-content: center;
    margin-right: 2px;
    text-transform: uppercase;
    padding: .85em 1.5em .75em;
    cursor: pointer;
    font-weight: 500;
    background-color: var(--light-gray-color);
    transition: background-color .35s, color .35s;
}
.tab_labels label:hover {
    color:var(--earth-color);
}
.tab_labels label:last-child {
    margin-right: 0;
}

#tab_1:checked ~ .tab_labels .tab_1, #tab_2:checked ~ .tab_labels .tab_2, #tab_3:checked ~ .tab_labels .tab_3, #tab_4:checked ~ .tab_labels .tab_4 {
    background:var(--earth-color);
    color:var(--mustard-color);
    cursor: default
}
.panels {position: relative;}
.panels [class^="panel_"] {
    opacity: 0;
    visibility: hidden;
    position: relative;
    height: 0;
    width:0;
    display: flex;
    padding:0;
    justify-content: space-around;
    align-items: flex-start;
    overflow: hidden;
    transition: opacity .35s, visibility .35s;
}
#tab_1:checked ~ .panels .panel_1, #tab_2:checked ~ .panels .panel_2, #tab_3:checked ~ .panels .panel_3, #tab_4:checked ~ .panels .panel_4 {
    opacity: 1;
    visibility: visible;
    padding: clamp(2rem, 2rem + 2vw, 4rem) clamp(1.5rem, 1rem + .5vw, 2rem);
    height: auto;
    width:100%
}

.panel-text {
    margin-right: 7.5%;
    max-width: 40em;
}
.panel-text h3 {
    color:var(--earth-color);
    font-size: clamp(1.625rem,1rem + 1vw,2rem);
    margin-bottom: 1em;
    font-weight: 600
}
.panel-text br {
    display: none;
}
.panels p.note {
    color:var(--earth-color);
    font-weight: 500;
    font-size: clamp(1.075rem, .75rem + .75vw, 1.25rem);
}
.panels img {
    width: 100%;
    height:auto;
    min-width: 20em;
}
.panels ul {
    padding:0;
    margin:0;
    list-style: none;
    margin-bottom:3em
}
.panels li {
    position: relative;
    margin-bottom:.75em;
    padding-left: 1.5em;
    font-size: clamp(.9327rem, .5rem + .5vw, 1rem);
    line-height: 1.6;
}
.panels li::before {
    content:"";
    position: absolute;
    left:0;
    top:.5em;
    display: inline-block;
    width:7px;
    height:7px;
    border-radius: 50%;
    background-color: var(--mustard-color);

}
.panels li:last-child {
    margin-bottom:0;
}

.panels a {
    text-decoration: none;
    font-weight:600;
    color:var(--mustard-color);
}

.panels button {
    display: none;
}

@media only screen and (max-width:64rem){
    .panels {
        display: flex;
        justify-content: start;
    }
    .panels [class^="panel_"] {
        flex-direction: column;
    }
    .panel-text {
        margin-bottom: 1.5em
    }
    .panels img {
        width:100%;
        min-width:0;
        max-width:none
    }
}
@media only screen and (max-width:40rem){
    .panels {
        display: block;
    }
    .panels button {
        display: flex;
        flex:1;
        width:100%;
        border:none;
        color:var(--earth-color);
        align-content: center;
        margin-bottom: .125em;
        justify-content: space-between;
        text-transform: uppercase;
        padding: .85em 1em;
        cursor: pointer;
        font-weight: 500;
        background-color: var(--light-gray-color);
        transition: background-color .35s, color .35s;
    }
    .panels button b {
        font-weight: 600;
        letter-spacing: .025em;
        font-size: clamp(.875rem, .5rem + .5vw, 1rem);
    }
    .accordion-icon {
        display: inline-block;
        position: relative;
        width: 12px;
        margin-right: 0;
        transition: transform .35s ease,width .35s ease;
    }
    .accordion-icon::before, .accordion-icon::after {
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate3d(0,-50%,0) rotate(180deg);
        transition: transform 500ms ease,background-color .5s ease;
        background: var(--mustard-color);
      }
    .accordion-icon::after {
        transform-origin: center;
        transform: translate3d(0,-50%,0) rotate(90deg);
    }
    button.expanded .accordion-icon {
        width: 14px;
        transform: rotate(135deg);
    }
    .panels button.expanded {
        background:var(--earth-color);
        color:var(--mustard-color);
    }

    .tab_labels {display: none; }

    .panels [class^="panel_"],#tab_1:checked ~ .panels .panel_1, #tab_2:checked ~ .panels .panel_2, #tab_3:checked ~ .panels .panel_3, #tab_4:checked ~ .panels .panel_4 {
        opacity: 0;
        visibility: hidden;
        width:0;
        height:0;
        padding:0;
        margin-top:0;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        overflow: hidden;
    }

    .panels button.expanded + [class^="panel_"] {
        opacity: 1!important;
        width:auto!important;
        height:auto!important;
        margin-top: 1.5em!important;
        margin-bottom: 1em;
        visibility: visible!important;
        position: relative!important;
    }
    .panel-text {
        padding-left: .25em;
        margin-right: 0;
    }
    #tabs.animate .expanded + [class^="panel_"] {transition: opacity .25s, visibility .25s;}
    #tabs.animate [class^="panel_"] {transition: opacity .25s, visibility .25s;}
    

}