@include breakpoint("wide", $mobile-last: true) {
    .debate {
        display: flex;
        flex-direction: column;
        .aside-left {
            order: 2;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .aside-right {
            order: 3;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        ul {
            margin-top: 0;
            margin-bottom: 0;
            list-style: none;
        }
        li {
            @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3); 
            font-size: 1rem; 
            width: 100%;
            max-width: 100%;
            font-family: 'Roboto Serif', sans-serif;
            margin: 0;
        }
        a.a--text-link {
            @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3);
            font-size: 1rem;
            font-family: 'Roboto Serif', sans-serif;
            border-bottom: 0.1rem dotted #000; /* 2px is the width of the border, and #000 is the color (black) */
            width: auto;
            background-image: none;
            margin: 0;
        } 
    
        &-container {
            order: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1.5rem;
            margin-bottom: 2rem;
            &__headline {
                font-family: 'Poppins', sans-serif; 
                font-weight: 1000; 
                font-size: 1.5rem;
                margin: 0;
            }
            &__sub-headline {
                font-family: 'Poppins', sans-serif; 
                font-weight: 1000; 
                font-size: 1rem;
                margin: 0;
            }
            &__paragraph {
                @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3);  
                font-size: 1rem;
                width: 100%;
                max-width: 100%;
                font-family: 'Roboto Serif', sans-serif;
                margin: 0;
                margin-bottom: 0.7rem;
            }
            &__strong { 
                @include set-font(-1, "multiple", $weight: "bold", $transform: "none",$max-width: 3);
                font-family: 'Roboto Serif', sans-serif;
            }
            &__figcaption { 
                @include set-font(-1, "single", $weight: "light", $transform: "none",$max-width: 3);
                font-family: 'Roboto Serif', sans-serif;
                color: grey;
            }
        }
        .nav__search {
            margin: 0;
        }
        form {
            margin: 0;
            font-family: 'Roboto Serif', sans-serif;
        }
    
        .form__field{   
            width: 100%;
        }   
    
        input {
            &[type=checkbox] {
                box-shadow: none;
            }
            &[type="checkbox"]:checked {
                background-color: black;
                &:not([disabled]):hover {
                    background-color: black;
                }
            }
        }
    
        .button {
            background-color: black;
            color: white;
            font-family: 'Poppins', sans-serif; 
            font-weight: 1000; 
            font-size: 1rem;
            margin-bottom: 3    rem;
        }
        label {
            @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3);  
            font-family: 'Roboto Serif', sans-serif;
            a {
                border-bottom: 0.1rem dotted #000; /* 2px is the width of the border, and #000 is the color (black) */
                width: auto;
            }
        }
    }
}


@include breakpoint("wide") {
    .debate {
        display: flex;
        justify-content: space-between; 
        align-items: flex-start;
    
        aside {
            display: flex;
            flex-direction: column;
            flex: 0 0 25%;
            max-width: 25%;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        ul {
            margin-top: 0;
            margin-bottom: 0;
            list-style: none;
        }
        li {
            @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3); 
            font-size: 1rem; 
            width: 100%;
            max-width: 100%;
            font-family: 'Roboto Serif', sans-serif;
            margin: 0;
        }
        a.a--text-link {
            @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3);
            font-size: 1rem;
            font-family: 'Roboto Serif', sans-serif;
            border-bottom: 0.1rem dotted #000; /* 2px is the width of the border, and #000 is the color (black) */
            width: auto;
            background-image: none;
            margin: 0;
          } 

        &-container {
            display: flex;
            flex-direction: column;
            flex: 0 0 40%;
            max-width: 40rem;
            gap: 1.5rem;
            margin-bottom: 2rem;
            &__headline {
                font-family: 'Poppins', sans-serif; 
                font-weight: 1000; 
                font-size: 1.5rem;
                margin: 0;
            }
            &__sub-headline {
                font-family: 'Poppins', sans-serif; 
                font-weight: 1000; 
                font-size: 1rem;
                margin: 0;
            }
            &__paragraph {
                @include set-font(-1, "multiple", $weight: "light", $transform: "none",$max-width: 3);  
                font-size: 1rem;
                width: 100%;
                max-width: 100%;
                font-family: 'Roboto Serif', sans-serif;
                margin: 0;
                margin-bottom: 0.5rem;
            }
            &__strong { 
                @include set-font(-1, "multiple", $weight: "bold", $transform: "none",$max-width: 3);
                font-family: 'Roboto Serif', sans-serif;
            }
            &__figcaption { 
                @include set-font(-1, "single", $weight: "light", $transform: "none",$max-width: 3);
                font-family: 'Roboto Serif', sans-serif;
                color: grey;
            }
        }
    }
}