.leadership-section {
    grid-column: 1 / -1;
    background-color: var(--white);
    padding: var(--spacing-60) 0;
    border-radius: var(--corner-radius-sm)
}

.leadership-section-header {
    grid-column: 1 / -1;
    margin: 0 var(--spacing-40) var(--spacing-60);
}

.leadership-section-list {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-60);
    padding-left: 0;
    margin: 0;
}

.leader {
    margin: 0 var(--spacing-40);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-40);
}

.leader-image {
    max-width: 193px;
    max-height: 193px;
}

.leader-image img {
    object-fit: contain;
    width: 100%;
    height: auto;
    border-radius: var(--corner-radius-sm);
}

.leader-contents {
    display: flex;
    flex-direction: column;
    max-height: fit-content;
}

.leader-title {
    margin-top: var(--spacing-4);
}

.leader-description {
    margin-top: var(--spacing-12);
}

.leader-description p {
    color: var(--granite-500);
}

@media (max-width: 767px) {
    .leader {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--spacing-20);
        row-gap: 0;
    }

    .leader-image {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        width: 96px;
        max-width: 96px;
    }

    .leader-contents {
        display: contents;
    }

    .leader-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .leader-title {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .leader-description {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .leader:not(:has(.leader-image)) {
        grid-template-columns: 1fr;
    }

    .leader:not(:has(.leader-image)) .leader-name,
    .leader:not(:has(.leader-image)) .leader-title {
        grid-column: 1;
    }
}