#types {

    .wrap {
        border-radius: 64px;
        border: 1px solid #fff;
        padding: 64px;

        @media only screen and (max-width: 980px) {
            padding: 0;
            border: none;
        }

        .head {
            display: grid;
            grid-template-columns: 1fr 1fr;     
            border-bottom: 1px solid #3e4047;
            margin-bottom: 50px;
            padding-bottom: 50px;               

            @media only screen and (max-width: 980px) {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .description {
                text-align: right;

                @media only screen and (max-width: 980px) {
                    text-align: left;
                }

            }
        }

        .body {
            display: grid;
            gap: 30px;

            @media only screen and (min-width: 980px) {
                grid-auto-flow: column;
            }

            @media only screen and (max-width: 980px) {
                gap: 20px;
                grid-template-columns: 1fr;
            }

            .item {
                border-radius: 32px;
                border: 2px dashed #3e4047;
                padding: 32px;
                display: grid;
                gap: 20px;

                img {
                    border-radius: 50%;
                    aspect-ratio: 1/1;
                    object-fit: cover;
                }

                .desc {
                    text-align: center;
                    color: var(--text);
                }
            }
        }       

        .foot {
            padding-top: 50px;

            @media only screen and (min-width: 980px) {
                border-top: 1px solid #3e4047;
                margin-top: 50px;    
            }

            .ornament {
                height: 3vh;
                overflow: hidden;
            }
        }               
    }

}