/* BēnreaDesignStudio */


/* Main */
main {
    flex-direction: column;
    padding: var(--spacer-min) var(--margin-body) var(--margin-body) var(--margin-body);
    gap: var(--margin-body);
}
main h2 {
    margin: 0 0 var(--spacer-normal) 0;
    color: var(--color-theme-dark);
}
main section {
    flex-direction: row;
    gap: var(--margin-body);
}
main section::-webkit-scrollbar {
    display: none;
}
main .left {
    display: flex;
    position: relative;
    flex-direction: column;
    /* margin: 0; */
    /* left: 0; */
    /* right: 0; */
    width: 60%;
    height: fit-content;
    gap: var(--spacer-normal);
}
main h4 {
    margin: 0 0 0 0;
    color: var(--color-theme-dark-text);
}
main h5 {
    margin: var(--spacer-min) 0 0 0;
    color: var(--color-theme-dark-text);
}
.separator {
    margin: var(--spacer-medium) 0 calc(var(--spacer-medium) - 8px) 0;
}

main .right {
    display: flex;
    position: sticky;
    flex-direction: column;
    margin: 0;
    top: 0;
    /* left: 0;
    right: 0; */
    width: 40%;
    padding: 0;
    height: fit-content;
    padding: calc(var(--size-header) + var(--spacer-normal)) 0 0 0;
    gap: var(--spacer-normal);
}
/* main section:first-of-type .right {
    padding: calc(var(--size-header) + var(--spacer-normal)) 0 0 0;
} */
main .right img {
    display: flex;
    position: relative;
    margin: 0;
    width: 100%;
    height: calc(100vh - (var(--size-header) * 2) + var(--spacer-normal));
    object-fit: cover;
    clip-path: 
    polygon(
      0% 0%, 
      0% 0%, 
      calc(100% - var(--notch-normal)) 0%, 
      100% var(--notch-normal), 
      100% 100%, 
      100% 100%, 
      var(--notch-normal) 100%, 
      0% calc(100% - var(--notch-normal))
    );
    overflow: hidden;
    filter: saturate(0.5) brightness(0.95);
}

table {
    text-align: left;
    position: relative;
    margin: 0;
    left: 0;
    right: 0;
    border-collapse: collapse;
    border-left: var(--border-small) solid var(--color-black-transparent-lighter);
    border-right: var(--border-small) solid var(--color-black-transparent-lighter);
    z-index: 2;
}
table li {
    padding: 0;
}
table th h5 {
    margin: 0;
}
thead {
    position: relative;
    background: #f3f3f3;
    border-top: var(--border-small) solid var(--color-text-black);
    border-bottom: var(--border-small) solid var(--color-text-black);
    z-index: 3;
}
thead tr {
    border-top: var(--border-small) solid var(--color-text-black);
    border-bottom: var(--border-small) solid var(--color-text-black);
}
th {
    padding: var(--spacer-normal);
}
tr {
    border-bottom: var(--border-small) solid var(--color-black-transparent-lighter);
}
tr:nth-of-type(even) {
    background: var(--color-black-transparent-faint);
}
td {
    vertical-align: top;
    padding: var(--spacer-normal);
}


/* Responsiveness */
@media screen and (max-width: 912px) {

    /* Main */
    main {
        padding: 0 var(--margin-body) calc(var(--margin-body) * 2) var(--margin-body);
        gap: calc(var(--margin-body) * 2);
    }
    main h2 {
        margin: 0 0 var(--spacer-min) 0;
    }
    main section {
        flex-direction: column;
        gap: calc(var(--margin-body) * 2);
        overflow: auto;
    }
    main .left {
        width: unset;
        margin: 0;
        left: 0;
        right: 0;
    }
    main h4 {
        margin: var(--margin-body) 0 0 0;
        color: var(--color-theme-dark);
    }
    .separator {
        margin: var(--spacer-normal) 0 0 0;
    }
    
    main .right {
        width: unset;
        position: relative;
        margin: 0;
        top: unset;
        left: 0;
        right: 0;
        padding: 0;
    }
    main .right img {
        height: fit-content;
    }
}

@media screen and (max-width: 560px) {
    
}