@media (width >= 1025px) {

    .layout {
        p {
            font-size: 1.6rem;
        }
    }

    .layout__input {
        flex-direction: row;

        input[type="text"],
        select,
        option,
        .btn {
            font-size: 1.6rem;
        }

        .btn {
            border: 3px solid var(--color-2);
            color: var(--color-4);
            background-color: var(--color-3);
        }
    }

    .layout__tabla {

        h2 {
            text-align: center;
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 5px;
            table-layout: auto;
            background-clip: padding-box;
            background-color: var(--color-4);
            border: 3px solid var(--color-2);
            transition: all 0.3s ease-in-out;

            &:hover {
                box-shadow:
                    0 1px 2px var(--color-6),
                    2px 1px 4px var(--color-4),
                    2px 4px 3px var(--color-7),
                    0 0 7px 2px var(--color-2),
                    inset 0 1px 2px var(--color-6),
                    inset 2px 1px 4px var(--color-4),
                    inset 2px 4px 3px var(--color-7),
                    inset 0 0 7px 2px var(--color-2);
            }

            & thead {
                display: table-header-group;
            }

            & tbody {
                display: table-row-group;
            }

            tr {
                width: auto;
                margin: 0;
                padding: 0;
                display: table-row;
                font-size: 1.6rem;

                .tabla__color {
                    background-color: var(--color-1);
                }
            }

            th,
            td {
                width: 16%;
                padding: 2rem;
                display: table-cell;
                text-align: center;
                white-space: nowrap;
                border-right: 3px solid var(--color-2);

                &:last-child,
                &:last-child {
                    border-right: none;
                }
            }

            th {
                color: var(--color-3);
                border-bottom: 3px solid var(--color-2);
                font-weight: bold;
            }

            td {
                color: var(--color-3);
                flex: none;
                justify-content: unset;
                align-items: unset;
                border-bottom: none;

                &::before {
                    content: none;
                }
            }
        }
    }

    .layout__explicacion {

        margin: 0 40rem 5rem 40rem;

        h2 {
            margin-top: 6rem;
            margin-bottom: 3rem;
            font-size: 2rem;

            &:first-child {
                margin-top: 0;
            }
        }

        p {
            margin-bottom: 2rem;
            text-align: left;
            color: var(--color-3);
        }

        p,
        ul {
            font-size: 1.6rem;
        }
    }
}