.page {
    min-inline-size: var(--page-min-inline-size);
    min-block-size: var(--page-min-block-size);
    margin: 0;
    padding: 0;

    font-family: var(--font-main);
    color: var(--color-text-base);
    font-variation-settings: "wght" var(--font-weight-text);
    background-color: var(--color-bg-base);
    background-image: var(--page-background-image);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page__section {
    inline-size: var(--content-width);
    margin-inline: auto;
    margin-block-end: var(--margin-padding-block);
}


.header {
    inline-size: var(--content-width);
    margin-inline: auto;
    margin-block: var(--margin-padding-block);
    align-items: center;
    padding: 20px;
    min-height: 368px;
    border: 2px solid var(--color-border);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
}

.header__tag {
    font-family: var(--font-accent);
    font-size: 23px;
    text-transform: uppercase;
}

.header__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;

}

.header__title {
    margin: 0;
    font-family: var(--font-accent);
    font-size: 65px;
    line-height: 1;
    text-transform: uppercase;
}

.cards {
    inline-size: var(--content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.card {
    border: 2px solid var(--color-border);
    background-color: #ffffff;
}

.card__title {
    margin: var(--card-title-padding-inline) var(--card-title-padding-block);
    font-weight: var(--font-weight-title);
    font-family: var(--font-main);
    font-size: 18px;
    font-variation-settings: "wght" var(--font-weight-title);
}

.card__image-wrapper {
    position: relative;
    margin-inline: 0;
    overflow: hidden;
    border-top: 2px solid var(--color-border);
}

.card__picture {
    display: block;
    inline-size: 100%;
}

.card__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
}

.card__label {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 1;

    font-family: var(--font-accent);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-text-base);
    opacity: 0.5;
    mix-blend-mode: hard-light;
}

@supports (
  (-webkit-text-stroke: 1px var(--label-text-stroke-color)) or
    (text-stroke: 1px var(--label-text-stroke-color))
) {
    .card__label {
        -webkit-text-stroke: 1px var(--label-text-stroke-color);
        text-stroke: 1px var(--label-text-stroke-color);
    }
}

@supports not (
  (-webkit-text-stroke: 1px var(--label-text-stroke-color)) or
    (text-stroke: 1px var(--label-text-stroke-color))
) {
    .card__label {
        text-shadow: 1px 0 0 var(--label-text-stroke-color),
        -1px 0 0 var(--label-text-stroke-color),
        0 1px 0 var(--label-text-stroke-color),
        0 -1px 0 var(--label-text-stroke-color);
    }
}


.card__content {
    padding-inline: var(--card-padding-inline);
    padding-block: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px; /*по макету здесь 25px, а не 7*/
    border-top: 2px solid var(--color-border);
}

.card__text {
    margin: 0;
    font-size: 18px;
    line-height: 21px;
    font-variation-settings: "wght" var(--font-weight-text);
}


.card__actions {
    padding-inline: var(--card-padding-inline);
    padding-block: 0 var(--card-padding-block);

    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.card__icon-button {
    border: 2px solid transparent;
    background-color: #ffffff;
    padding: 0;
    cursor: pointer;
    height: 38px;
    width: 38px;
    box-sizing: border-box;
}

.like-icon {
    display: block;
}


.card__like-button {
    height: 38px;
    width: 130px;
}


.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding-inline: 18px;
    padding-block: 12px;

    border: 2px solid var(--color-border);
    background-color: var(--button-bg-color);
    color: var(--button-text-color);

    font-family: var(--font-accent);
    font-size: 14px;
    cursor: pointer;
}


.button__icon {
    display: block;
}

.button__icon rect {
    fill: currentColor;
}

.content__save {
    inline-size: var(--content-width);
    margin-inline: auto;
    margin-block: 50px 0;

    display: flex;
    justify-content: center;
}

.content__save-button {
    inline-size: 100%;
    max-inline-size: 340px;
    text-transform: none;
    height: 55px;
}


.dialog {
    border: 2px solid var(--color-border);
    padding: 28px;
    background-color: #ffffff;
    inline-size: min(100% - 2 * var(--page-padding-inline), 353px);
    margin: auto;
}

.dialog__content {
    display: grid;
    align-items: center;
    grid-template-columns: 39px max(100% - 2 * var(--page-padding-inline), 234px);
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.dialog::backdrop {
    background-color: rgb(0 0 0 / 0.75);
}

.dialog__icon {
    display: block;
}

.dialog__title {
    font-family: var(--font-accent);
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
}

.dialog__description {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.dialog__controls {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.dialog:not([open]) {
    display: none;
}

.dialog__button {
    width: 100%;
    height: 38px;
}

.button:hover,
.card__icon-button:hover {
    cursor: url("../images/cursor.png") 16 16, pointer;
}


@media (width <= 376px) {
    :root {
        margin-inline: 0;
        width: var(--mobile-content-width);
    }

    .header {
        min-height: 327px;
    }

    .header__title {
        font-size: 49px;
    }
    .header__tag {
        font-size: 14px;
    }

    .card__label {
        top: 25px;
        right: 25px;
    }

    .content__save-button {
        display: grid;
        grid-template-rows: auto auto;
        justify-items: center;
        align-content: center;
        row-gap: 8px;
        text-transform: none;
        height: 86px;
        width: 306px;
    }

    .content__save-button .button__icon {
        margin: 0;
    }

    .button__icon {
        width: 28px;
        height: 28px;
    }

    .content__save-button .button__text {
        text-align: center;
    }

    .dialog {
        inline-size: calc(100% - 2 * var(--page-padding-inline));
    }

    .dialog__content {
        grid-template-columns: 1fr auto;
    }
}

.card__image_stage_sepia {
    filter: sepia(0.6) contrast(1.4);
}

.card__image_stage_brightness {
    filter: brightness(1.4) saturate(1.6);
}

.card__image_stage_hue {
    filter: hue-rotate(40deg) saturate(1.6);
}

.card__image_stage_invert {
    filter: invert(1.1) brightness(0.8) saturate(0.6);
}

.card__image_stage_sepia_grayscale {
    filter: grayscale(0.8) sepia(0.8) contrast(1.25) brightness(1.05);
}

.card__image_stage_blur {
    filter: blur(16px);
}

.card__image_stage_hue_brightness_sepia {
    filter: hue-rotate(40deg) brightness(1.05) sepia(0.1);
}