.box {
    box-sizing: border-box;
    overflow: hidden;
}

.unet {
    background-color: #1E1E1E;
    container-type: size;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1%;
    box-sizing: border-box;
    padding: 3%;
}

.img-io {
    /* height: 15rem; */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 45%;
    margin-right: 2%;
}

.img-io img {
    height: 10cqw;
    width: auto;
    border-radius: 4cqh;
}

.layer {
    background-color: #666666;
    border-radius: 4cqh;
    width: 20cqw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.convolution-block {
    /* background-color: #bbb; */
    width: 80%;
    height: 15cqh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 33%;
}

.convolution-box {
    /* background-color: black; */
    display: flex;
    justify-content: center;
    /* width: 20%;
    height: 100%; */
    width: 3cqw;
    height: 15cqh;
}

.convolution {
    background-color: #81d16e;
    width: 100%;
    height: 100%;
    border-radius: 1.7cqh;
}

.leader-line {
    z-index: 2000 !important;
}

[data-layer="1"] {
    height: 100%;
    gap: 50%;
}
[data-layer="2"] {
    height: 90%;
    gap: 45%;
}
[data-layer="3"] {
    height: 80%;
    gap: 40%;
}
[data-layer="4"] {
    height: 70%;
    gap: 35%;
}

[data-layer="5"] {
    height: 60%;
    gap: 12%;
}
[data-layer="5"] .convolution-block {
    height: 40cqh;
    flex-direction: column;
    gap: 25%;
}
[data-layer="5"] .convolution-block .convolution-box {
    /* width: 2.7vw; */
    height: 15cqh;
}