/* Main content styles */
main {
    .containerTextSection {
        display: flex;
        padding: 2%;

        > .textSection {
            max-width: 60%;

            > h1 {
                margin-bottom: 25px;
            }

            > p {
                margin-top: 5px;
            }

            > .text {
                overflow: hidden;
                max-height: 0;
                transition: max-height 2s cubic-bezier(0,1,.36,.84);

                &.open {
                    max-height: 1000px;
                    transition: max-height 2s ease-in-out;
                }
            }
        }

        > .images {
            background-size: cover;
            width: 30%;
            height: 350px;
        }
    }

    .textSection2 {
        max-width: 80%;
        margin: auto;
        padding: 25px 0 50px;

        > h2 {
            text-align: center;
        }

        > p {
            margin-top: 5px;
            text-align: center;
        }
    }
}

/* Tablet horizontal */
@media screen and (max-width: 1100px) {
    .containerTextSection, .textSection2 {
        margin: 0 var(--margin-small);
    }
}

/* Tablet horizontal */
@media screen and (max-width: 900px) {
    .containerTextSection {
        max-width: 100%;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 0;

        > .textSection {
            min-width: 100%;

            && h1 {
                font-size: 1.75rem;
            }

            && h2 {
                font-size: 1.5rem;
            }

            && p,
            .text {
                font-size: 1.25rem;
            }

            > button {
                width: 35%;
                font-size: 1.5rem;
            }
        }

        && .images {
            min-width: 100%;
            margin: auto;
        }
    }

    .textSection2 {
        max-width: 100%;

        && h2 {
            font-size: 1.5rem;
        }

        && p {
            font-size: 1.25rem;
        }
    }
}

/* Mobile horizontal */
@media screen and (max-width: 320px) {
    .containerTextSection {
        max-width: 95%;

        && .images {
            min-width: 100px;
            height: 250px;
        }

        > .textSection {
            > p {
                margin-right: 10%;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .containerTextSection {
        flex-direction: column;
        padding: var(--padding-small);

        .textSection,
        .images {
            max-width: 100%;
            padding: var(--padding-small);
        }
    }

    .textSection2 {
        padding: var(--padding-small);
    }
}