@font-face {
    font-family: "GE Inspira";
    src: url("../font/ge-inspira-regular.woff2") format("woff2"),
         url("../font/ge-inspira-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    font-family: Arial, Helvetica, sans-serif;
    color: #172a40;
    background: #eeeeee;
    font-size: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100svh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 22px;
}

p:last-child {
    margin-bottom: 0 !important;
}

.card {
    width: min(100%, 400px);
    background: #ffffff;
    border: 1px solid #d9dfe6;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 27px rgba(25, 47, 73, 0.06);
    margin-bottom: 100px;

    .accent {
        height: 5px;
        background: #0084ff;
    }

    .body {
        container-type: inline-size;
        padding: 26px 27px 20px 27px;
    }

    p {
        font-size: 0.875rem;  /* 14px */
        line-height: 1.5;
        color: #3f5164;
        margin: 0 0 0.5rem 0;
    }

    .bottom {
        min-height: 48px;
        background: #f8fafc;
        border-top: 1px solid #edf0f3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 27px;
    }
}

.brand {
    display: grid;
    grid-template-columns: 4.6875rem 1.0625rem 8.125rem;  /* 75px 17px 130px */
    align-items: center;
}

.brand-logo {
    grid-column: 1;
    width: 100%;
    height: auto;
}

.brand-name {
    grid-column: 3;
    margin: 0;
    font-family: "GE Inspira", sans-serif;
    font-weight: 400;
    font-size: 2.1875rem;    /* 35px */
    color: #0084ff;
    line-height: 2.0625rem;  /* 33px */
    transform: translateZ(0);
}

.icon-alien {
    width: 1rem;
    height: auto;
    vertical-align: text-bottom;
}

.rule {
    height: 1px;
    background: #e1e7ed;
    margin: 25px 0 18px 0;
}

.signal {
    display: flex;
    gap: 5px;
    align-items: center;
}
.signal i {
    display: block;
    width: 5px;
    height: 5px;
    background: #0084ff;
}
.signal i:nth-child(2) {
    opacity: 0.5;
}
.signal i:nth-child(3) {
    opacity: 0.23;
}

.social-links {
    display: flex;
    align-items: center;
    /*gap: 12px;*/
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-link {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid;
    border-radius: 3px;
    margin-left: 12px;

    .icon {
        display: block;
        width: 16px;
        height: 16px;
        background: currentColor;
        text-indent: 105%;
        white-space: nowrap;
        overflow: hidden;
    }
}

.social-link:focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
}

.linkedin {
    border-color: #0a66c2;
    background: #0a66c2;
    color: #ffffff;

    .icon {
        -webkit-mask: url("../img/icon-linkedin.svg") center /contain no-repeat;
        mask: url("../img/icon-linkedin.svg") center /contain no-repeat;
    }
}

.linkedin:hover {
    background: #ffffff;
    color: #0a66c2;
}

.linkedin:focus-visible {
    outline-color: #0a66c2;
}

@media(max-width: 420px) {
    .card {
        .body {
            padding: 24px 24px 18px 24px;
        }

        .bottom {
            padding-right: 24px;
            padding-left: 24px;
        }
    }
}

@container (width < 13.875rem) {  /* 222px */
    .brand {
        grid-template-columns: 3.75rem 0.875rem 6.5rem;  /* 60px 14px 104px */
    }

    .brand-name {
        font-size: 1.75rem;     /* 28px */
        line-height: 1.625rem;  /* 26px */
    }
}

@container (width < 11.125rem) {  /* 178px */
    .brand {
        grid-template-columns: 2.8125rem 0.625rem 4.875rem;  /* 45px 10px 78px */
    }

    .brand-name {
        font-size: 1.3125rem;    /* 21px */
        line-height: 1.1875rem;  /* 19px */
    }
}