:root {
    --section-padding:0 32px 0 32px;
    --section-text-align: center;
    --section-left-width: 100%;
    --section-right-display: none;
    --section-title-size: 24px;
    --section-img-display: block;
    --list_card-width: 100%;
    --info-text-size: 16px;
}

img, video {
    height: auto;
    max-width: 100%;
}

.Section {
    display: flex;
    text-align: var(--section-text-align);
    align-items: center;
    padding: var(--section-padding);
    padding-top: 40px;
    padding-bottom: 40px;
}

.SectionLeft {
    flex-grow:1;
    width: var(--section-left-width);
}

.SectionRight {
    flex-grow:1;
    width:50%;
    display: var(--section-right-display);
}

.SectionTitle {
    font-size: var(--section-title-size);
    font-weight:bold;
    margin-bottom:16px;
}

.ListSection {
    padding: var(--section-padding);
    align-items: center;
    padding-top:40px;
    padding-bottom:40px;
}

.ListSection .SectionTitle {
    text-align: center;
}

.ListContainer {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
}

.ListCard {
    background:white;
    display:flex;
    margin:10px;
    padding: 24px 24px 24px 40px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    color:767676;
    width: var(--list_card-width);
}
.ListCard:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.CardTitle {
    font-weight:bold;
}

.CardInfo {
    flex-grow:1;
}

.SectionImgMobile {
    display: var(--section-img-display);
}

.Info {
    color: #767676;
    font-weight: 500;
    font-size: var(--info-text-size);
}

.ContactLabel {
    display:flex;
    background:white;
    padding:10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

    align-items: center;
    width: fit-content;
    margin: 10px 0;
}
.ContactLabel:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.LabelIcon {
    margin-right:16px;
}

@media screen and (min-width: 768px) {
	:root {
        --section-text-align: left;
        --section-left-width: 50%;
        --section-right-display: block;
        --section-title-size: 28px;
        --list_card-width: 40%;
        --section-img-display: none;
        --info-text-size: 20px;
	}
}

@media screen and (min-width: 1024px) {
	:root {
		--section-padding:0 80px 0 80px;
        --section-text-align: left;
        --section-left-width: 50%;
        --section-right-display: block;
        --section-title-size: 32px;
        --list_card-width: 40%;
        --section-img-display: none;
        --info-text-size: 20px;
	}
}