:root {
    --green: #273F27;
    --grey: #A6A7A7;
    --white: #ffffff;
    --black: #000000;
}

.strange-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;

    .flex-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .overflow {
        overflow-x: auto;
    }

    .select-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;

        .download {
            width: 100%;

            .btn-green {
                display: block;
                margin-right: auto;
                margin-left: auto;
                background-color: var(--green);
                border: 1px solid var(--green);
                border-radius: 10px;
                padding: 0.5rem 1rem;
                font-weight: bold;
                color: var(--white);
                cursor: pointer;
                transition-duration: 300ms;

                &:hover {
                    background-color: var(--white);
                    color: var(--green);
                }
            }
        }

        .single {
            border: 1px solid var(--grey);
            border-radius: 10px;
            padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;

            .single-img {
                width: 30%;

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    .strange-table {
        width: 100%;

        th,
        td {
            font-size: 12px;
            text-align: center;
        }
    }
}

.w-full {
    width: 100%;
}

@media (min-width: 640px) {
    .strange-container {
        max-width: 640px;

        .select-content {
            .single {
                label {
                    font-size: 14px;
                }
            }
        }

        .strange-table {

            th,
            td {
                font-size: 14px;
            }
        }
    }
}

@media (min-width: 768px) {
    .strange-container {
        max-width: 768px;

        .select-content {
            flex-direction: row;
            gap: 2rem;

            .single {
                width: 47%;

                label {
                    font-size: 16px;
                }
            }
        }
    }
}

@media (min-width: 1024px) {
    .strange-container {
        max-width: 1024px;

        .select-content {
            .single {
                label {
                    font-size: 20px;
                }
            }
        }

        .overflow {
            overflow: initial;
        }

        .strange-table {

            thead {
                position: sticky;
                top: 0;
            }

            th,
            td {
                font-size: 16px;
            }
        }
    }
}

@media (min-width: 1280px) {
    .strange-container {
        max-width: 1280px;

        .flex-content {
            gap: 4rem;
        }

        .strange-table {

            thead {
                top: 130px;
            }

            th {

                &.domaine,
                &:last-child {
                    width: 200px;
                }
            }
        }
    }
}

@media (min-width: 1536px) {
    .strange-container {
        max-width: 1536px;
    }
}