.hang {position: absolute}
.hang.top {
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.hang.bottom {
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.full {width: 100%; display: flex}
.full.up {transform: translateY(-1px)}
.full.down {transform: translateY(1px)}

.big-box {
    border-radius: 70px;
}

.pattern-bg {
    background-color: hsl(var(--hue-2), 50%, 10%);
    background-image:
        linear-gradient(to bottom, var(--root) 0%, transparent 500px),
        url(/src/media/pattern.svg);
    background-repeat: repeat;
    background-size: 20px;
}

.padded {
    padding: 0 30px;
}

.hiw-svg {
    width: 100%;
}

.how-it-works {
    width: 100%;
    padding: 0 75px;
    display: flex;
    flex-direction: column;
}
.hiw-main {
    position: relative;
    background-color: hsl(var(--hue-2),50%,5%);
    box-shadow: inset 0 0 30px hsl(var(--hue-2),15%,0%);
    border-radius: 75px;
    border: 5px solid hsl(var(--hue-2),10%,15%);
    outline: 1px solid hsl(var(--hue-2),10%,35%);
    padding: 75px;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 75px;
    overflow: hidden;
}

.hiw-bottom-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/src/media/pattern.svg");
    background-size: 10px;

    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #0005 100%);
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #0005 100%);
}

/* .hiw-main {
    position: relative;
    background-color: hsl(200,60%,15%);
    box-shadow: inset 0 0 30px hsl(200,40%,30%);
    border-radius: 30px;
    border: 5px solid hsl(180,60%,30%);
    outline: 1px solid hsl(170,50%,70%);
    padding: 50px;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 50px;
} */


.hiw-card {
    border-radius: 20px;
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* box-shadow: 10px 10px 30px hsl(var(--hue-2),50%,30%,.3); */
    box-shadow: 7px 7px 20px hsl(var(--hue-2),50%,30%,.3);
    transition: .5s cubic-bezier(.5, .5, 0, 1);
    background-color: hsl(200,60%,5%);
}

.hiw-card .hiw-icon {
    flex: 0 0 150px;
    background-color: hsl(var(--hue-2),100%,10%);
    transition: .5s cubic-bezier(.5, .5, 0, 1);
    transform: translateX(0);
}

.hiw-card.hidden .hiw-icon {
    transform: translateX(-100%);
}

.hiw-icon-main svg {
    transform: scale(1);
    transition: 1s cubic-bezier(.5, .5, 0, 1);
    opacity: 1;
}
.hiw-icon-main svg.hidden {
    transform: scale(.3);
    opacity: 0;
}

.hiw-stroke {
    stroke-dasharray: 10;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: 1s cubic-bezier(.5, .5, 0, 1);
}

svg.hidden .hiw-stroke {
    stroke-dashoffset: 10;
    transition-duration: 0s;
}

.hiw-icon-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hiw-icon svg {width: 100px}

/* .hiw-icon svg *.stroke {
    fill: none;
    stroke: var(--txt);
}
.hiw-icon svg *.fill {
    stroke: none;
    fill: hsl(var(--hue),40%,30%,.5);
}
.hiw-icon svg *.both {
    stroke: var(--txt);
    fill: hsl(var(--hue),40%,30%,.5);
} */

.hiw-txt {
    padding: 50px;
    position: relative;
    /* background-color: hsl(200,60%,25%); */
    background-color: hsl(200,60%,7%);
}

.hiw-txt-main {
    position: relative;
}

.hiw-shine {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.hiw-shine path {
    fill: #0002;
}

.top-border {
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.grad1 {
    background: linear-gradient(
        180deg,
        hsl(223, 47%, 50%) 0%,
        hsl(230, 50%, 25%) 100%);
}

.grad2 {
    background: linear-gradient(
        180deg,
        hsl(var(--hue), 10%, 10%) 50%,
        hsl(var(--hue), 10%, 7%) 100%);
}

h1 b, h2 b, h3 b, h4 b {
    color: #0004;
    -webkit-text-stroke: 1px var(--txt);
    text-shadow: 4px 4px 0 #0003;
}

.cozy h2 {
    color: hsl(var(--hue-3), 50%, 20%);
    -webkit-text-stroke: 1px var(--bg-3);
}

.cozy-svg {
    width: 42%;
    flex: 0 0 auto;
}

.cozy-svg * {
    transform-origin: center;
    transform-box: fill-box;
}

:root {
    --review-pad: 14px;
    --review-border: 1px solid hsl(var(--hue-2), 40%, 8%);
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.review {
    width: 100%;
    display: flex;
    gap: 10px;
}

.review-logo {
    flex: 0 0 auto;
    padding: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.review-logo svg {
    width: 100%;
    height: 100%;
}

.review-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: hsl(var(--hue-2), 50%, 4%);
    border-radius: 20px;
    border-top-left-radius: 10px;
    overflow: hidden;
    border: var(--review-border);
}

.review-txt {
    padding: var(--review-pad);
}

.review-txt p {
    line-height: 1.5;
}

.review-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--h8);
    border-top: var(--review-border);
}

.review-details {
    display: flex;
    gap: 10px;
    padding: var(--review-pad);
}

.review-stars {
    margin-left: auto;
    margin-right: var(--review-pad);
    height: 23px;
    display: flex;
    gap: 5px;
}

.review-stars svg {
    transition: .6s cubic-bezier(.5, .5, 0, 1);
    transform: rotate(0deg);
    opacity: 1;
}

.review-stars svg.hidden {
    transform: rotate(90deg) scale(.5);
    opacity: 0;
    transition-duration: 0s;
}

.review-stars svg, .review-stars path {
    fill: hsl(50, 70%, 60%);
    stroke: hsl(var(--hue-3), 70%, 40%);
    stroke-width: .3;
    stroke-linecap: round;
    stroke-linejoin: round;
    height: 100%;
}


:root {
    --carousel-gap: 0px;
    /* --carousel-size: 180px; */
    --carousel-size: calc(min(var(--whole-w), 100vw) / 7.1);
}

.carousel {
    width: 100%;
    height: var(--carousel-size);
    display: flex;
    z-index: 1;
}

.carousel-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* width: var(--whole-w); */
    transform: translate(-50%, -50%);
}

.perf {
    animation: perf-scroll 3s infinite linear;
    stroke-dashoffset: 0;
}

@keyframes perf-scroll {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 5;
    }
}

.carousel-main {
    flex: 0 0 auto;
    display: grid;
    width: calc(var(--carousel-size) + var(--carousel-gap));
    height: 100%;
    gap: var(--carousel-gap);
    grid-auto-flow: column;
}

@keyframes carousel-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.carousel-icon {
    width: var(--carousel-size);
    height: var(--carousel-size);
    display: flex;
}

.carousel-icon-main {
    width: 100%;
    height: 100%;
    /* background-color: hsl(var(--hue-2), 50%, 4%); */
    background-color: hsl(50, 4%, 8%);
    padding: calc(var(--carousel-size) / 4.5);
    border-radius: calc(var(--carousel-size) / 9);
    will-change: transform;
}

.carousel-icon svg {
    width: 100%;
    height: 100%;
}

.carousel-icon img {
    width: 100%;
    height: 100%;
}

.carousel2 {
    width: 100%;
    height: 100px;
    border-top: 2px solid var(--txt);
    border-bottom: 2px solid var(--txt);
    pointer-events: none;
    user-select: none;
}

.carousel2-main {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 100%;
}

.carousel2-item {
    font-size: 80px;
    color: transparent;
    -webkit-text-stroke: 1px var(--icon-3);
    text-shadow: 10px 10px 0 #0004;
    text-transform: uppercase;
    padding: 0 20px;
}

.fancy-button {
    width: fit-content;
    background-color: var(--fg);
    margin: auto;
    padding: 15px 20px;
    border-radius: 15px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-family: var(--brand-font);
    box-shadow:
        0px 5px 0px hsl(var(--hue), 60%, 30%),
        5px 5px 10px var(--bg);
    position: relative;
    transition: .1s cubic-bezier(.5, .5, 0, 1);
}

.fancy-button:active {
    box-shadow: 5px 5px 10px var(--bg);
    transform: translateY(5px);
}

.button {
    display: flex;
    width: fit-content;
    padding: 15px 20px;
    border: 2px solid var(--fg-3);
    border-radius: 50px;
    background-color: #0003;
    font-family: var(--text-font);
    font-size: var(--h7);
    transition: .4s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
    opacity: 1;
    overflow: hidden;
}

.button > span {
    transition: .4s cubic-bezier(.5, .5, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: relative;
}

.button.hidden {
    transform: scale(.5);
    transition-duration: 0s;
    opacity: .5;
}

.button svg {
    position: relative;
    height: 30px;
    flex: 0 0 auto;
}

.button-hold:hover .button {
    transform: scale(.95);
}
.button-hold:hover span {
    transform: scale(.95);
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 0%;
    height: 100%;
    transform: skewX(-30deg);
    background-color: hsla(var(--hue-3), 100%, 40%, .3);
    transition: .4s cubic-bezier(.5, .5, 0, 1);
}
.button-hold:hover .button::before {
    width: calc(100% + 20px);
    left: -10px;
    right: auto;
}

.plans {
    display: flex;
    gap: 30px
}

.plan {
    width: 100%;
    background-color: var(--root-invert);
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid var(--root-invert);

    transition: .5s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
    opacity: 1;
}

.plan.hidden {
    transition-duration: 0s;
    transform: scale(.9);
    opacity: .5;
}

.plan-bg-1 .plan-top {
    background-color: hsl(150, 60%, 53%)
}
.plan-bg-2 .plan-top {
    background-color: hsl(40, 80%, 60%)
}

.plan-top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    color: var(--bg);
    font-family: var(--text-font);
    font-weight: bold;
    font-size: var(--h6);
}

.plan-bottom {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bg);
}

.plan-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
}

.plan-icon {
    stroke-dasharray: 10;
    stroke-dashoffset: 0;
    transition: .5s cubic-bezier(.5, .5, 0, 1);
}

.hidden .plan-icon {
    stroke-dashoffset: 10;
    transition-duration: 0s;
}

.plan-bg-1 .plan-icon {
    color: hsl(150, 43%, 53%)
}
.plan-bg-2 .plan-icon {
    color: hsl(40, 70%, 60%)
}

.plan-item > div {
    line-height: 1.3;
    transform: scale(1);
    opacity: 1;
    transition: .5s cubic-bezier(.5, .5, 0, 1);
}

.hidden .plan-item > div {
    transform: scale(.8);
    opacity: 0;
    transition-duration: 0s;
}

.pricing {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: hsl(var(--hue), 6%, 5%);
    border-radius: 20px;
    border: 1px solid hsl(var(--hue), 6%, 15%);
}

.pricing-row {
    display: flex;
}

.pricing-row > div {
    width: 100%;
    padding: 20px;
    display: flex;
    gap: 13px;
    align-items: center;
}

.pricing-row .small, .small-txt {
    font-size: var(--h7);
    color: hsl(var(--hue-2), 20%, 60%)
}

.pricing .pricing-row:not(:last-child) {
    border-bottom: 1px solid hsl(var(--hue), 6%, 15%);
}
.pricing-row > div:not(:last-child) {
    border-right: 1px solid hsl(var(--hue), 6%, 15%);
}

.note {
    border: 1px solid hsl(var(--hue), 6%, 20%);
    background-color: hsl(var(--hue), 6%, 15%);
    border-radius: 20px;
    padding: 20px;
    font-size: var(--h7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.note-icon svg {
    flex: 0 0 auto;
    width: 20px;
}

.foot {
    position: relative;
    height: 250px
}

.foot-svg {
    height: 100%;
}

.foot svg, .foot path {
    height: 100%;
    fill: #fff3;
}

.huge {
    width: 100%;
    font-size: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    text-align: left;
    max-width: 65vw;
}

.foot-whole-white {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
}

.foot-white {
    flex: 0 0 auto;
    position: relative;
    width: 300px;
    height: 100%;
    background-color: #fff3;
}

.foot-button {
    align-self: center;
    position: relative;
}

.foot-button a {
    width: 100%;
    border-radius: 20px;
    border-top-left-radius: 30px;
    background-color: hsl(223, 77%, 95%);
    padding: 20px 40px;
    display: block;
    text-wrap: nowrap;
    color: var(--bg);
    font-size: 22px;
    transition: .3s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
}
.foot-button a:hover {
    transform: scale(1.05);
}

.foot-button a span {
    display: flex;
    transform: scale(1);
    transition: .3s cubic-bezier(.5, .5, 0, 1);
}

.foot-button a:hover span {
    transform: scale(1.05);
}

#printer-paper {
    transform-box: fill-box;
    transition: 1.5s cubic-bezier(.26,.28,.67,1);
    transform: translateY(0);
}
.hidden #printer-paper {
    transform: translateY(100%);
    transition-duration: 0s;
}

#pc-code > rect {
    transition: opacity .5s linear, transform .6s cubic-bezier(1, 0, 0, 1.2);
    transform: scaleX(1);
    transform-origin: left;
    transform-box: fill-box;
    opacity: 1;
}

.hidden #pc-code > rect {
    transform: scaleX(.5);
    opacity: 0;
    transition-duration: 0s;
}

#hiw-mug {
    transform-origin: bottom left;
    transform-box: fill-box;
    animation: mug-slide 1.5s linear;
}

.hidden #hiw-mug {
    animation: none;
}

#smoke-hold {
    opacity: 1;
    transition: 2s cubic-bezier(.5, .5, 0, 1);
}

.hidden #smoke-hold {
    opacity: 0;
    transition-duration: 0s;
}

@keyframes mug-slide {
    0% {
        transform: translateX(100%);
        animation-timing-function: cubic-bezier(.3, 0, 1, .5);
    }
    20% {
        transform: translateX(0%)
    }
    25% {
        transform: translateX(0%) rotate(-5deg)
    }
    30% {
        transform: translateX(0%) rotate(-5deg);
        animation-timing-function: cubic-bezier(.5, 0, 1, 0);
        transform-origin: bottom left;
    }
    37% {
        transform: translateX(0%) rotate(0deg);
        transform-origin: bottom right;
    }
    42% {
        transform: translateX(0%) rotate(2deg);
    }
    50% {
        transform: translateX(0%) rotate(2deg);
    }
    53% {
        transform: translateX(0%) rotate(0deg);
    }
    100% {
        transform: translateX(0%) rotate(0deg)
    }
}

.cozy-art {
    transition: .5s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
}

.cozy-art.hidden {
    transform: scale(.7);
    transition-duration: 0s;
}

.img {
    width: 100%;
}
.img.ver2 {
    max-width: 300px;
}

.halfy {
    max-width: 700px;
}

.img.vershad img {
    box-shadow: 10px 10px 0 #0004;
}

.img img {
    border-radius: 20px;
    width: 100%;
}

.img.ver2 img {
    object-fit: cover;
    aspect-ratio: 1.2;
}


.globe-services {
    padding: 0 40px;
    display: flex;
    gap: 60px;
    position: relative;
}

.globe-services::after,
.globe-services::before {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--txt-2) 100px,
        var(--fg-2) calc(100% - 100px),
        transparent 100%);
    border-radius: 100%;
}

.globe-services::before {
    left: 0;
}
.globe-services::after {
    right: 0;
}

:root {
    --globe-size: 300px;
    --globe-h: 500px;
}

.globe-box {
    width: var(--globe-size);
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

.globe-box > div {
    position: sticky;
    top: calc(50vh - var(--globe-h) / 2);
    left: 0;
    width: 100%;
    height: var(--globe-h);
}

.globe-box img, .globe-box svg {
    width: 100%;
    height: 100%;
}

.globe-text {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.globe-text div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.globe-text > div {
    height: var(--globe-h);
}

.globe-text > div > div {
    height: 100%;
}

.globe-text > div > div > div {
    background-color: #0005;
    padding: 30px;
    border-radius: 30px;
    transition: .3s cubic-bezier(.5, .5, 0, 1);

    box-shadow: 10px 10px 0 #000b;
}

.collapse-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px
}

.collapse-item-hold {
    width: 100%;
    display: grid;
    grid-template-rows: 80px 0fr;
    background-color: hsl(var(--hue), 15%, 15%);
    border: 2px solid #000;
    box-shadow: 7px 7px 0 #000;
    border-radius: 10px;
    transition: .5s cubic-bezier(.5, .5, 0, 1);
}

.collapse-item-hold.engaged {
    grid-template-rows: 80px 1fr;
}

.collapse-item-preview {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
}

.collapse-item-preview-main {
    display: flex;
    align-items: center;
    gap: 15px;
    user-select: none;
    width: 100%;
    transition: .1s cubic-bezier(.5, .5, 0, 1);
    transform: scale(1);
    padding: 20px;
}
.collapse-item-preview:active .collapse-item-preview-main {
    transform: scale(.9);
}

.collapse-text {
    width: 100%;
}

.collapse-icon {
    height: 40px;
    flex: 0 0 auto;
}
.collapse-icon > * {
    height: 100%;
}

.collapse-content {
    min-height: 0;
    overflow: hidden;
}

.collapse-content-main {
    padding: 20px;
    padding-top: 0;
}

.bubble {
    width: auto;
    height: 60px;
    font-size: 40px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(150, 100%, 50%);
    color: hsl(150, 100%, 50%);
    border-radius: 100px;
    font-family: var(--brand-font);
}

.blob {
    background-color: hsl(var(--hue), 15%, 15%);
    border-radius: 50px;
    padding: 70px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 350px);
    justify-content: center;
    gap: 60px;
}

.brand-item {
    width: fit-content;
    display: flex;
    border-radius: 10px;
    border-top-right-radius: 40px;
    overflow: hidden;
    align-items: center;
}

.brand-item > div {
    aspect-ratio: 1;
    flex: 0 0 auto;
    display: flex;
}

.brand-old {
    width: 150px;
    height: 150px;
    filter: grayscale(.7) brightness(.8);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.brand-new {
    width: 200px;
    height: 200px;
    position: relative;
}

.brand-old::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0%;
    width: 50%;
    height: 100%;
    background: linear-gradient(-90deg, #0006 0%, transparent 100%);
}

.brand-item img, .brand-item svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.no-touch {
    pointer-events: none;
}

.boxy {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    max-width: 700px;
    margin: auto;
    background-color: #0004;
    padding: 40px;
    border-radius: 30px;
}

.boxy-icon {
    width: 90px;
    height: 90px;
    fill: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxy-icon svg {
    width: 100%;
    height: 100%;
}

.boxy-link, .boxy-link a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.boxy-link {
    background-color: #fff1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: .1s;
}

.boxy-link:hover {
    background-color: #fff2;
}

.boxy-link::before {
    content: '';
    position: absolute;
    top: 0;
    right: -25px;
    width: 0%;
    height: 100%;
    border-radius: 50px;
    background-color: #fff2;
    transition: 0s;
}

.boxy-link:hover::before {
    width: calc(100% + 50px);
    background-color: transparent;
    left: -25px;
    right: auto;
    transition: 1s cubic-bezier(.5,.5,0,1);
}

.boxy-link a {
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.contact-small-logo {
    max-width: 300px;
    margin: auto;
}

.contact-smaller-logo {
    max-width: 200px;
    margin: auto;
}

.link {
    display: inline-block;
    color: hsl(var(--hue-3), 100%, 60%);
    position: relative;
}

.link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 2px;
    background-color: hsl(var(--hue-3), 100%, 60%);
    border-radius: 10px;
    transition: .5s cubic-bezier(.5, .5, 0, 1);
}
.link:hover::before {
    width: 100%;
    left: 0;
    right: auto
}

.link::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: hsl(var(--hue-3), 100%, 60%);
    border-radius: 10px;
    transition: .5s cubic-bezier(.5, .5, 0, 1);
}
.link:hover::after {
    width: 100%;
    right: 0;
    left: auto
}


.websites {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: hsl(var(--hue), 6%, 5%);
    border-radius: 20px;
    border: 1px solid hsl(var(--hue), 6%, 15%);
}

.websites-row {
    display: flex;
    overflow: hidden;
}

.websites-row > div {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    gap: 13px;
    align-items: center;
    flex: 1 1 auto;
}

.websites-row > div:last-child {
    width: fit-content;
    flex: 0 1 auto;
}

.websites-row a {
    display: flex;
    max-width: 100%;
}

.websites-row a span {
    width: 100%;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.websites-row .small, .small-txt {
    font-size: var(--h7);
    color: hsl(var(--hue-2), 20%, 60%)
}

.websites .websites-row:not(:last-child) {
    border-bottom: 1px solid hsl(var(--hue), 6%, 15%);
}
.websites-row > div:not(:last-child) {
    border-right: 1px solid hsl(var(--hue), 6%, 15%);
}