:root {
    --info-block-margin:1rem;
    --info-gap: 3rem;
    --column-gap:3rem;
    --white-transparent: rgba(255, 255, 255, 0.93); 
}

.info-block {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: var(--white-transparent);
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--info-block-margin);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 100vw;
    overscroll-behavior: contain;  
    box-shadow: 0 50vh 0 0 var(--white-transparent);
    padding-bottom: var(--info-block-margin);
}

.info-block.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.info-block--close {
    position: absolute;
    top: var(--info-block-margin);
    right: var(--info-block-margin);
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.info-block__content {
    margin-top: var(--info-block-margin);
    box-sizing: border-box;
}

.info-block__content p {
    margin: 0 0 1em;
}

.info-block__col,
.info-block__about {
    min-width: 0;
    overflow-wrap: anywhere;
}

html:has(.info-block:not(.is-hidden)),
html:has(.info-block:not(.is-hidden)) body {
    overflow: clip;
    overscroll-behavior: none;
}

/* mobile */
@media (max-width: 720px) {

    :root {
        --info-gap: 1rem;
    }
    
    .info-block {
        padding: var(--info-block-margin);
    }

    .info-block__content {
        display: grid;
        margin-top: calc(var(--info-block-margin) * 2);
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: var(--column-gap);
        row-gap: var(--info-block-margin);
        align-content: start;
        gap: var(--info-gap);
    }

    .info-block__col--general {
        grid-column: 1;
        grid-row: 2;
    }

    .info-block__about {
        order: -1;
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 40rem;
        align-self: end;
    }

    .info-block__col--general    { grid-column: 1; grid-row: 2; }
    .info-block__col--team1      { grid-column: 2; grid-row: 2; }
    .info-block__col--team2      { grid-column: 3; grid-row: 2; }
    .info-block__col--accounting {
        grid-column: 1 / -1;  
        width: auto;
    }   
}

/* desktop */
@media (min-width: 721px) {

    .info-block__content {
        display: grid;
        grid-template-columns: auto auto auto 1fr;
        column-gap: var(--info-gap);
        row-gap: var(--info-block-margin);
        grid-template-rows: auto 1fr;
        justify-content: start;
    }

    .info-block__col--general {
        grid-column: 1;
        grid-row: 1;
        margin-right: calc(var(--info-gap)*2);  
    }

    .info-block__col--team1      { grid-column: 2; grid-row: 1;  }
    .info-block__col--team2      { grid-column: 3; grid-row: 1;  }
    .info-block__col--accounting { grid-column: 4; grid-row: 1;  }

    .info-block__about {
        grid-column: 2 / -1;
        grid-row: 2;
        align-self: end;
    }
}