@import '../_variables.css';

.p-home main {
    .type-text {
        margin-bottom: unset;

        p, span {
            color: var(--body-gray);
            font-size: 20px;
            font-weight: 400;
            line-height: 33px;
            letter-spacing: 0.025rem;
            margin-bottom: unset;

            &.intro-big-text {
                color: var(--body-color);
                font-size: 40px;
                font-weight: 700;
                line-height: 125%;
                letter-spacing: 0.4px;
                margin-bottom: 2.5rem;
            }
        }
    }

    section {
        &.home-introduction {
            margin-bottom: 3rem;

            .intro-text-container {
                order: 2;

                .type-text {
                    .intro-big-text {
                        color: var(--body-color);
                        font-size: 40px;
                        font-weight: 700;
                        line-height: 125%;
                        border-bottom: unset;
                        letter-spacing: 0.025rem;
                        padding-bottom: unset;
                        margin-bottom: 2.5rem;
                        text-align: center;
                    }

                    a {
                        margin-left: auto;
                        margin-right: auto;
                        display: block;
                        text-align: center;
                    }
                }
            }

            .intro-image-container {
                > .type-image {
                    margin-bottom: 1.5rem;

                    img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 16 / 9;
                    }
                }
            }

            @container (min-width: 60rem) {
                background-color: var(--bg-fernuni);

                padding: 2.75rem 0 2.5rem 0;
                margin-bottom: 11.25rem;

                .intro-text-container {
                    order: inherit;

                    .type-text {
                        a, .intro-big-text {
                            text-align: revert;
                        }
                    }
                }

                .intro-image-container {
                    > .type-image {
                        margin-bottom: -13rem;
                        position: relative;
                        z-index: 10;
                    }

                    img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 16 / 9;
                    }
                }
            }
        }

        &.white-section {
            padding-top: 3.75rem;

            > .container > div[id*="c"] {
                margin-bottom: 3rem;

                @container (min-width: 48rem) {
                    margin-bottom: 7.5rem;
                }
            }
        }

        &.gray-section {
            padding-top: 1.5rem;
            background-color: var(--color-grey);

            > .container > div[id*="c"] {
                padding-bottom: 1.5rem;
            }

            @container (min-width: 48rem) {
                padding-top: 5rem;

                > .container > div[id*="c"] {
                    padding-bottom: 5rem;
                }
            }
        }
    }

    h2 {
        font-size: 28px;
        font-weight: 600;
        line-height: 120%;
    }

    .type-text a:not(.btn),
    .type-textmedia a:not(.btn) {
        color: var(--link-color-default);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        transition: all 0.2s ease;

        &:hover {
            color: var(--link-color-hover);
            font-weight: 500;
        }

        &:after {
            padding-left: 0.5rem;
            display: inline-block;
            font-family: bootstrap-icons !important;
            font-style: normal;
            font-weight: 400 !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: -.125em;
            content: "\F138";
            -webkit-font-smoothing: antialiased;
        }
    }

    .type-textmedia .ce-gallery {
        .ce-column,
        .ce-row,
        figure {
            width: 100%;
            height: 100%;
        }
    }
}