.infoContainer {
    height: clamp(25px, 15%, 100px);
    
    position: absolute;
    top: var(--horizontal-margin);
    right: var(--horizontal-margin);   

    display: flex;
    flex-direction: row-reverse;
}

.infoContainer > *  {
    height: 100%;
    aspect-ratio: 1;

    border-radius: var(--corner-small);

    display: flex;

    margin-left: clamp(5px, 20%, 10px);
}

.infoContainer > * > #icon {
    align-items: center;

    width: 100%;
    height: 100%;

    color: var(--white);
    text-align: center;
    font-size: calc(35px + 0.4vw);

    margin: 0px;
}

.infoContainer > * > #info {
    position: absolute;
    right: calc(var(--horizontal-margin)/2);
    top: 85%;
    height: fit-content;
    width: fit-content;

    display: none;

    --hpadding: calc(var(--horizontal-margin) / 3);
    --vpadding: calc(var(--hpadding) / 3);
    padding-left: var(--hpadding);
    padding-right: var(--hpadding);
    padding-top: var(--vpadding);
    padding-bottom: var(--vpadding);

    background-color: var(--white);
    border-radius: var(--corner-big);

    text-align: right;
    vertical-align: middle;
    font-size: calc(14px + 0.3vw);
}

.infoContainer>div:hover #info {display: flex;}
.infoContainer>div:active #info {display: flex;}