.section-title {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.section-description {
    margin-top: 0.5em;
}

.video-container {
    overflow: hidden;
    border-radius: var(--item-border-radius);
}

section.horizontal-image-description {
    margin: 1.5em 0em;

    >.items {
        display: flex;
        flex-direction: row;

        gap: 1.5em;
        margin: 0;
        padding: 0.5em 3em;

        >.image {
            width: 30%;

            img {
                border-style: solid;
                border-color: var(--line-color);
                border-width: var(--item-border-width);
                border-radius: var(--item-border-radius);
            }
        }

        >.item {
            width: 70%;

            >ul {
                margin: 0em;
                padding: 0em;
                list-style-type: none;
            }

            .item-heading {
                margin-top: 0em;
                margin-bottom: 0.5em;
            }
        }
    }

    @media screen and (width <=600px) {
        >.items {
            flex-direction: column;
            align-items: center;


            >.image {
                width: 70%;
                height: 30%;

                button {
                    width: 100%;
                }
                /* height: 20px; */
                /* aspect-ratio: unset; */

                img {
                    width: 100%;
                    height: 200px;
                    object-fit:cover;
                }
            }

            >.item {
                width: 100%;
            }
        }
    }
}

section.horizontal-gallery {
    margin: 1.5em 0em;

    >.items {
        display: flex;
        flex-direction: row;
        gap: 1.5em;

        justify-content: space-evenly;
        list-style-type: none;
        margin: 0;
        padding: 0.5em 3em;

        >.item {
            display: flex;
            flex-direction: column;
            min-width: calc(100%/3 - 1em);
            width: calc(100%/3 - 1em);

            .item-heading {
                margin-top: 0;
                margin-bottom: 0.75em;
                text-align: center;

                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .item-description {
                margin-top: 1em;
            }

            img {
                border-style: solid;
                border-color: var(--line-color);
                border-width: var(--item-border-width);
                border-radius: var(--item-border-radius);
            }
        }
    }

    @media screen and (width <=600px) {
        >.items {
            flex-direction: column;
            align-items: center;

            >.item {
                min-width: initial;
                width: 100%;

                img {
                    width: min(250px, 100%);
                }
            }
        }
    }

}


section.image-description-pairs-gallery {
    margin: 1.5em 0em;

    >.items {
        grid-area: image-description-pairs;
        display: flex;
        flex-direction: column;
        gap: 1em;

        list-style-type: none;
        margin: 0;
        padding: 0.5em 3em;

        >.item {
            display: flex;
            flex-direction: row;
            align-items: start;
            gap: 1em;

            .item-heading {
                margin-top: 0;
                margin-bottom: 0.5em;
            }

            .item-description {
                margin-top: 0.5em;
            }

            button {
                flex: 0 0 calc(100%/3);
                /* width: 100%; */
            }

            img {
                border-style: solid;
                border-color: var(--line-color);
                border-width: var(--item-border-width);
                border-radius: var(--item-border-radius);
            }

            &.reversed{
                flex-direction: row-reverse;
            }
        }
    }

    @media screen and (width <=600px) {
        >.items {
            >.item {
                display: block;
                /* flex-direction: column; */

                button {
                    float:left;
                    width: 40%;
                    margin: 3vw;
                }

                &.reversed {
                    button {
                        float:right;
                    }
                }
            }
        }
    }
}

section.figure-description-pairs-gallery {
    margin: 1.5em 0em;

    >.items {
        grid-area: image-description-pairs;
        display: flex;
        flex-direction: column;
        gap: 1em;

        list-style-type: none;
        margin: 0;
        padding: 0.5em 3em;

        >.item {
            display: flex;
            flex-direction: row;
            align-items: start;
            gap: 1em;

            .item-description {
                margin-top: 0.5em;
            }

            .item-heading {
                margin-top: 0;
                margin-bottom: 0.5em;
            }

            >figure {
                flex: 0 0 calc(100%/3);

                margin: 0;

                img {
                    border-style: solid;
                    border-color: var(--line-color);
                    border-width: var(--item-border-width);
                    border-radius: var(--item-border-radius);
                }
            }

        }
    }

    @media screen and (width <=450px) {
        >.items {
            >.item {
                flex-direction: column;

                >figure {
                    align-self: center;
                    width: 75%;
                    flex: initial;
                }
            }
        }
    }
}