.hero {
    /*--art-height: 400px;*/
    --art-image: url(/assets/img/main-page-hero-3.webp);
}
.hero h1 {
    font-size: 2.75rem;
    margin-block-end: 2rem;
    /*font-family: "Arial Black", serif;*/
}



.home-page-panel {
    display: grid;
    grid-template-columns: minmax(300px, 1fr);
    gap: var(--base-elements-gap);
    align-content: start;
}


.home-page-panel .panel-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "img content"
                          "note note";
    column-gap: 2ch;
    row-gap: 1rem;
    padding: 2ch;
    border: 1px solid var(--light-border);
    font-size: 1rem;
}

.home-page-panel .panel-item p {
    margin-block: 0;
}

.home-page-panel .panel-item:nth-of-type(even) {
    grid-template-columns: 1fr 300px;
    grid-template-areas: "content img"
                          "note note";
}

.panel-item .panel-item__art {
    grid-area: img;
}

.panel-item .panel-item__content {
    grid-area: content;
}


.home-page-panel .panel-item h2 {
    margin-block-start: 0;
    font-size: 1.5em;
}

.panel-item__content__headline > p {
    /*font-size: 1em;*/
}

.panel-item__art {
    align-self: stretch;
}

.panel-item__art img {
    display: block;
    width: 100%;
    pointer-events: none;
    user-select: none;
}

.panel-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*.panel-item__content__note {*/
/*    position: relative;*/
/*    grid-area: note;*/
/*    margin-block: 0;*/
/*    display: flex;*/
/*    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);*/
/*    color: var(--text-invert);*/
/*    font-size: .75rem;*/
/*    padding: .5em 4ch ;*/
/*    background: linear-gradient(to right, var(--primary), var(--primary-dark), var(--primary-color-50));*/
/*    min-height: 2rem;*/
/*    z-index: 0;*/
/*}*/

/*.panel-item__content__note:before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 20px;*/
/*    aspect-ratio: 50/19;*/
/*    height: 24px;*/
/*    transform: translateY(-50%);*/
/*    background: url(/assets/img/pict/dots-2.svg) center / contain no-repeat ;*/
/*    mask-image: linear-gradient(to right, black 50%, transparent 100%);*/
/*    z-index: -1;*/
/*}*/

.panel-item:first-of-type {
    background-color: #dfc4b1;
    border-color: var(--accent-soft);
    color: black;
    font-size: 1.2em;
    font-weight: 500;

}



.panel-item__footer {

    display: flex;
    width: 100%;
    grid-area: note;
    border-block: 1px solid var(--primary-color-50);
    font-size: 0.875em;
    /*margin-block: 0;*/
    /*padding-block-start: .1em;*/
    justify-content: space-between;
    justify-self: stretch;
    color: var(--text-main);

}

.panel-item__footer a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.panel-item__footer a:hover {
    color: inherit;
}



section:first-child .panel-item__footer {
    font-size: 0.725em;
}

.panel-item__button {
    position: relative;
    justify-self: flex-end;
    letter-spacing: .05ch;
    padding-inline: 4ch;
    background: radial-gradient(300px 150px at top left, rgba(147, 142, 139, 0.48) 0%, transparent 100%);
    overflow: clip;
}

.panel-item__button::after {
    position: absolute;
    content: "";
    inset: -10%;

    background: linear-gradient(
            120deg,
            transparent 40%,
            rgba(255, 255, 255, 0.12),
            transparent 100%
    );

    transform: translateX(-100%);
    transition: transform .6s ease;
}

.panel-item__button:hover::after {
    transform: translateX(100%);
}

.panel-item:first-of-type .panel-item__content__note {
    /*border-block-start: 1px solid var(--light-border);*/
}




/*.panel-item:nth-of-type(even) .panel-item__content__note {*/
/*    background: linear-gradient(to left, var(--primary), var(--primary-dark), var(--primary-color-50));*/
/*    justify-content: flex-end;*/
/*}*/

/*.panel-item:nth-of-type(even) .panel-item__content__note:before {*/
/*    left: auto;*/
/*    right: 20px;*/
/*    top: 50%;*/
/*    transform: scaleX(-1) translateY(-50%);*/

/*}*/