#hamCards {
    --columnsCount: 2;
    justify-items: center;
}

@media (orientation: portrait) {
    #hamCards {
        --columnsCount: 1;
    }
}

#hamDevices {
    --columnsCount: 3;
    justify-items: center;
}

.boxQSL {
    height: calc(max(30vh, 30vw) + 30px + 3vh);
    width: calc(max(30vh, 30vw) * 0.7146 + 20px);
    border-radius: 20px;
    background: var(--accent-100);
    font-size: 2vh;
    color: var(--text-100);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.boxQSL img {
    margin: 10px;
    height: calc(max(30vh, 30vw));
    width: calc(max(30vh, 30vw) * 0.7146);
}

.boxQSL a {
    height: 3vh;
    margin-bottom: 10px;
    font-weight: bold;
}

.boxDevices {
    height: calc(max(20vh, 20vw) + 30px + 3vh);
    width: calc(max(20vh, 20vw) * 0.5146 + 20px);
    border-radius: 20px;
    background: var(--accent-100);
    font-size: 2vh;
    color: var(--text-100);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.boxDevices a {
    height: 3vh;
    margin-bottom: 10px;
    font-weight: bold;
}

@media (orientation: portrait) {
    .boxDevices {
        font-size: 1vh;
    }

    .boxDevices a {
        margin-top: 10px;
    }
}

.boxDevicesImg {
    margin: 10px;
    width: calc(max(20vh, 20vw) * 0.5146);
    height: calc(max(20vh, 20vw));
}

.boxDevicesImg img {
    width: calc(max(20vh, 20vw) * 0.5146);
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}