:root {
        --insta-av-size: 45px;
        --insta-gap: 12px;
        --insta-radius: 20px;
    }

    .night .mem-insta,
    .night .mem-insta-reel {
        filter: brightness(0.8) contrast(1.1);
    }


    .mem-insta-username::before,
    .mem-insta-reel-username::before {
        content: '@';
        margin-right: 1px;
    }

    /* сторис */

    .mem-insta-reel {
        background-size: cover !important;
        background-position: center !important;
        margin: 0 auto;
        width: 100%;
        aspect-ratio: 2 / 3;
        max-width: 400px;
        border-radius: var(--insta-radius);
        box-sizing: border-box;
        outline: 1px solid #00000010;
        border: 10px solid white;
        color: white;
        align-content: end;
        display: grid;
    }

    .mem-insta-reel-content {
        display: grid;
        grid-template-areas: 'av username'
            'desc desc';
        align-items: center;
        grid-template-columns: var(--insta-av-size) 1fr;
        background: #00000020;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        border-radius: 0 0 calc(var(--insta-radius) / 2) calc(var(--insta-radius) / 2);
    }

    .mem-insta-reel-av {
        grid-area: av;
        border: 2px solid #00000020;
    }

    .mem-insta-reel-av,
    .mem-insta-reel-av img {
        width: var(--insta-av-size);
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
    }

    .mem-insta-reel-av img {
        display: block;
    }

    .mem-insta-reel-username {
        grid-area: username;
        text-transform: lowercase;
        font-weight: bold;
        margin-left: var(--insta-gap);
    }

    .mem-insta-reel-desc {
        grid-area: desc;
        margin-top: var(--insta-gap);
    }

    .mem-insta-reel::after {
        content: '';
        width: 100%;
        background: #00000010;
    }

    /* просто фотки */

    .mem-insta {
        display: grid;
        grid-template-areas: 'av username'
            'av location'
            'photo photo'
            'desc desc';
        margin: 0 auto;
        width: 100%;
        max-width: 445px;
        background-color: white;
        border-radius: var(--insta-radius);
        padding: 20px;
        box-sizing: border-box;
        gap: var(--insta-gap);
        grid-template-columns: var(--insta-av-size) 1fr;
        border: 1px solid #00000010;
        align-items: center;
    }

    .mem-insta-av {
        grid-area: av;
        border: 2px solid #00000020;
    }

    .mem-insta-av,
    .mem-insta-av img {
        width: var(--insta-av-size);
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
    }

    .mem-insta-av img {
        display: block;
    }

    .mem-insta-username {
        grid-area: username;
        margin-bottom: calc(var(--insta-gap) * -1);
        text-align: left;
        text-transform: lowercase;
        font-weight: bold;
    }

    .mem-insta-username::before {
        color: #adb3bc;
    }

    .mem-insta-location {
        grid-area: location;
        margin-top: calc(var(--insta-gap) * -1);
        color: #767676;
        text-transform: lowercase;
        text-align: left;
    }

    .mem-insta-photo {
        grid-area: photo;
    }

    .mem-insta-photo img {
        object-fit: cover;
        aspect-ratio: 1 / 1;
        width: 100%;
        border-radius: var(--insta-radius);
        box-shadow: 0px 0 5px 0 #48464442;
        border: 1px solid #00000010;
        display: block;
    }

    .mem-insta-desc {
        grid-area: desc;
        color: #40474e;
        line-height: 1.4;
        padding: 0 10px;
        position: relative;
    }

    .mem-insta-desc::before {
        width: 100%;
        height: 37px;
        content: '';
        background: url(https://i.imgur.com/lSlKE8m.png) no-repeat center;
        background-size: contain;
        display: block;
        margin: 0 0 5px;
    }



    .wrapper {
        display: grid;
        grid-template-areas: 'template template'
            'insta reels';
        gap: 10px;
        justify-items: center;
    }

    .meminst_template {
        grid-area: template;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 15px 10px;
        box-sizing: border-box;
        background: #ffffff20;
        border-radius: 15px;
    }

    .meminsta_wrp {
        grid-area: insta;
    }

    .memreels_wrp {
        grid-area: reels;
    }

    .meminsta_label {
        margin: 5px;
        font-weight: bold;
    }

    .meminsta_wrp .meminsta_label,
    .memreels_wrp .meminsta_label {
        display: block;
    }

    .meminsta_input,
    .meminsta_textarea {
        width: 100%;
        max-width: 100% !important;
    }

    .meminst_template .meminsta_input {
        margin: 0 15px 0 0;
        width: 200px;
    }

    .meminsta_textarea {
        resize: vertical;
    }

    #meminst_warning,
    #meminsta_template_warning_photo,
    #meminsta_template_warning_reel {
        display: none;
        margin: 5px 0 0;
        font-weight: bold;
        color: darkred;
        text-align: center;
    }

    .night .meminsta,
    .night .memreels {
        filter: brightness(0.8) contrast(1.1);
    }

    @media (max-width: 540px) {
        .wrapper {
            grid-template-columns: 1fr;
            grid-template-areas:
                "template"
                "insta"
                "reels";
            padding: 0 15px;
            box-sizing: border-box;
        }

        .wrapper .meminsta_input {
            width: 100%;
        }

        .meminst_template .meminsta_label {
            display: block;
            width: 100%;
        }

        .meminst_template .meminsta_input {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .meminst_template>label {
            width: 100%;
        }
    }