@use "../mixins" as *;
@use "../media" as *;


.team {
    &__inner {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 2.5em;

        @include tablet {
            padding-block: calc(var(--section-padding-y) / 2);
        }
    }

    &__header {
        word-break: break-word;
        text-align: center;

        @include mobile-s {
            text-align: left;
        }
    }

    &__title {
        line-height: 95%;
        margin-bottom: 0.25em;
    }

    &__cards {
        @include flex-stretch();

        column-gap: 1em;

        & .team-card {
            padding: 30px;
            background-color: var(--color-light-accent);
            border-radius: var(--border-radius-30);
            display: flex;
            flex-direction: column;
            min-width: 310px;

            &__role {
                padding: 0.5em 1.5em;
                background-color: var(--color-light-accent-3);
                width: fit-content;
                border-radius: var(--border-radius-30);
                font-weight: 600;
                margin-bottom: 1em;
            }

            &__name {
                @include fluid-text(28, 22);

                font-weight: 700;
                margin-bottom: 0.5em;

            }

            & p {
                flex-grow: 1;
            }

            &__image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                transition: transform var(--transition-duration-02);

                &.scaled {
                    transform: scale(1.05);
                }

                &-wrapper {
                    width: 100%;
                    overflow: hidden;
                    border-radius: var(--border-radius-30);
                    user-select: none;

                    @include desktop {
                        aspect-ratio: 1 / 1;
                    }

                    @include tablet {
                        aspect-ratio: initial;
                    }
                }
            }
        }

        @include tablet {
            flex-direction: column;
            row-gap: 2em;
        }
    }
}