@media (min-width: 1300px)
{
    .tabs 
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tabs span
    {
        font-size: 2rem;
    }
    
    .tabs ul 
    {
        width: 100%;
        display: flex;
        gap: 0.5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .tabs ul li 
    {
        width: 100%;
    }
    
    .tabs input[type="radio"] 
    {
        display: none;
    }
    
    .tabs label 
    {
        display: flex;
        justify-content: center;
        cursor: pointer;
        padding: 10px 0;
        background: rgb(172, 137, 68);
        border-radius: 2rem 2rem 0 0;
    }
    
    .tabs .content 
    {
        width: 100%;
        box-sizing: border-box;
        border-radius: 2rem;
        background: rgb(255, 221, 152);
    }
    
    .tabs section 
    {
        display: none;
    }
    
    #tab1:checked ~ .content #content1,
    #tab2:checked ~ .content #content2, 
    #tab3:checked ~ .content #content3,
    #tab4:checked ~ .content #content4,
    #tab5:checked ~ .content #content5,
    #tab6:checked ~ .content #content6,
    #tab7:checked ~ .content #content7,
    #tab8:checked ~ .content #content8
    {
        display: block;
    }
    
    #tab1:checked ~ ul label[for="tab1"],
    #tab2:checked ~ ul label[for="tab2"], 
    #tab3:checked ~ ul label[for="tab3"],
    #tab4:checked ~ ul label[for="tab4"],
    #tab5:checked ~ ul label[for="tab5"],
    #tab6:checked ~ ul label[for="tab6"],
    #tab7:checked ~ ul label[for="tab7"],
    #tab8:checked ~ ul label[for="tab8"]
    {
        background: rgb(248, 199, 100);
        border-bottom: 1px solid transparent;
    }
}

@media (min-width: 320px) and (max-width: 768px)
{
    .tabs 
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .tabs span
    {
        font-size: 1.0rem;
    }
    
    .tabs ul 
    {
        width: 100%;
        display: flex;
        gap: 0.5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .tabs ul li 
    {
        width: 100%;
    }
    
    .tabs input[type="radio"] 
    {
        display: none;
    }
    
    .tabs label 
    {
        display: flex;
        justify-content: center;
        cursor: pointer;
        padding: 10px 0;
        background: rgb(172, 137, 68);
        border-radius: 2rem 2rem 0 0;
    }
    
    .tabs .content 
    {
        width: 100%;
        box-sizing: border-box;
        border-radius: 2rem;
        background: rgb(255, 221, 152);
    }
    
    .tabs section 
    {
        display: none;
    }
    
    #tab1:checked ~ .content #content1,
    #tab2:checked ~ .content #content2, 
    #tab3:checked ~ .content #content3,
    #tab4:checked ~ .content #content4,
    #tab5:checked ~ .content #content5,
    #tab6:checked ~ .content #content6,
    #tab7:checked ~ .content #content7,
    #tab8:checked ~ .content #content8
    {
        display: block;
    }
    
    #tab1:checked ~ ul label[for="tab1"],
    #tab2:checked ~ ul label[for="tab2"], 
    #tab3:checked ~ ul label[for="tab3"],
    #tab4:checked ~ ul label[for="tab4"],
    #tab5:checked ~ ul label[for="tab5"],
    #tab6:checked ~ ul label[for="tab6"],
    #tab7:checked ~ ul label[for="tab7"],
    #tab8:checked ~ ul label[for="tab8"]
    {
        background: rgb(248, 199, 100);
        border-bottom: 1px solid transparent;
    }
}