body, html {
    margin: 0;
    padding: 0;
    background-color: #b4aca5;
}

/* header navigation */
header {
    background-color: #5f453a; 
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    top: 0;
}

.title-site {
    width: 20%;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 100px;
    white-space: pre;
}

nav ul li:last-child {
    margin-left: 20%;
}

/* filtering panel */
.tab-panel {
    display: none;
    align-items: center;
    padding: 0 10%;
}

.tab-panel.active {
    display: block;
}

.container {
    display: grid;
    grid-template-areas: 
        "title title"
        "large-trait button-top"
        "small-trait small-trait"
        "spare button-under";
    grid-template-rows: 25px 30px 1fr 30px;
    grid-template-columns: 1fr 1fr;
    background-color: #ece3d6;
}

.boxA {
    grid-area: title;
    background-color: #7f5c46;
    padding: 2px 0px 0px 10px;
}
.boxB {
    grid-area: large-trait;
    padding: 2px 0px 0px 10px;
}
.boxC {
    grid-area: button-top;
    text-align: right;
    padding: 2px 20px 0px 0px;
}
.boxD {
    grid-area: small-trait;
    display: grid;
    grid-template-rows: 150px 80px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.boxE { grid-area: spare;}
.boxF {
    grid-area: button-under;
    text-align: right;
    padding: 2px 20px 0px 0px;
}

div ul {
    list-style: none;
}

label {
    display: block;
}

.settings {
    background-color: #ece3d6;
    margin: 0 10%;
}

/* item panel */
.item-panel {
    display: none;
    padding: 0 6%;
}

.item-panel.active {
    display: block;
}

/* card 1280x720 3:2 */
.card-container {
    display: flex;
    background-color: plum;
    margin: 7px 0;
}

.card-iframe {
    max-width: 1280px;
    width: 34%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background-color: plum;
}

.card-data {
    flex: 1;
    background-color: plum;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: 
        "title title"
        "data link";
}

.card-data-title {
    grid-area: title;
}

.card-data-data {
    grid-area: data;
}
.card-data-link {
    grid-area: link;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-images {
    width: 34%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.card-images img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}