.segmented-control-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.segmented-control-container .segmented-control-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 1.5rem) / 4);
}

.segmented-control-container .segmented-control-content input {
    display: none;
}

.segmented-control-container .segmented-control-content .segmented-control {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ColorRow);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    width: 100%;
}

.segmented-control-container .segmented-control-content .segmented-control:hover {
    background-color: var(--ColorRowHover);
}

.segmented-control-container .segmented-control-content input:checked ~ .segmented-control {
    background-color: var(--ColorBlue10);
}

.segmented-control-container .segmented-control-content:hover input:checked ~ .segmented-control {
    background-color: var(--ColorBlue50);
}

.segmented-control-container .segmented-control-content .segmented-control img {
    width: 4rem;
    max-width: unset;
}

@media screen and (max-width: 570px) {
    .segmented-control-container .segmented-control-content {
        width: calc((100% - 1rem) / 3);
    }
}

@media screen and (max-width: 440px) {
    .segmented-control-container .segmented-control-content {
        width: calc((100% - 0.5rem) / 2);
    }
}