@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-host-img-width: 48px;
    --dx-c-host-img-margin-right: 16px;
}

dx-icon {
    display: inline-block;
    position: relative;
    top: -1px;
}

.container {
    background: var(--dx-podcast-host-background-color);
    box-shadow: var(--dx-g-box-shadow-sm);
    border-radius: 16px;
    padding: 36px;
    overflow: hidden;
}

.host-presentation,
.host-img {
    display: flex;
}

.host-img {
    margin-right: var(--dx-c-host-img-margin-right);
    align-items: center;
}

.host-img > img {
    border-radius: 99999px;
    width: var(--dx-c-host-img-width);
}

.host-bio > p {
    margin: 16px 0;
    color: var(--dx-g-text-body-color);
}

.dx-text-label-2 {
    color: var(--dx-g-text-label-color);
}

@media (min-width: 640px) {
    .host {
        position: relative;
    }

    .host dx-button {
        position: absolute;
        top: 0;
        right: 0;
    }

    .host-bio {
        margin-left: calc(
            var(--dx-c-host-img-width) + var(--dx-c-host-img-margin-right)
        );
    }
}

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
}