.options-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
@media (orientation: landscape) {
    .option {
        background-color: #FFFFFF;
        width: calc(100% / 5.5);
        box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        -webkit-box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        -moz-box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        box-sizing: border-box;
        padding: 1rem 1rem 1rem 1rem;
        transition: padding 0.5s ease-out, width 0.5s ease-out;
    }
    .option:hover {
        padding: 1rem 2rem 1rem 2rem;
        width: calc(100% / 5.5 + 2rem);
        transition: padding 0.5s ease, width 0.5s ease;
    }
}
@media (orientation: portrait) {
    .option {
        background-color: #FFFFFF;
        width: calc(100% / 3.3);
        box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        -webkit-box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        -moz-box-shadow: 0 0 1rem 0.5rem var(--shadow-color);
        box-sizing: border-box;
        padding: 1rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .option:hover {
        width: calc(100% / 3);
    }
}
.option-content {
    font-size: var(--font-size-medium);
    color: var(--text-color-gray);
    text-align: center;
}
.option-header {
    margin-top: calc(var(--font-size-large) / 2);
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--font-size-large);
    color: var(--text-color);
}
.option-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.75rem;
}