@import '../main.css';

.introduction .introduction-text,
.introduction .brands {
    margin: var(--measure-2000) 0;
}

.introduction .brands {
    margin: var(--measure-2000) 0;
}

.introduction .brands .list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.introduction .brands .list img {
    height: var(--measure-1500);
}

.introduction .brands .list img.eureca {
    height: var(--measure-1125);
}

.introduction .brands .list img.inter {
    height: var(--measure-1250);
}

.introduction .button-group {
    margin-top: var(--measure-2000);
}

@media (min-width: 768px) {
    .introduction .button-group {
        margin-top: 0;
    }
}

@media (min-width: 1025px) {
    .introduction .introduction-text,
    .introduction .brands {
        margin: var(--measure-3000) 0;
    }
}

@media (min-width: 1400px) {
    .introduction .introduction-text,
    .introduction .brands {
        margin: var(--measure-4000) 0;
    }
}

.introduction .slide {
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.introduction .slide .component {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    border-left: 0;
}

.container-slide {
    padding: 0 var(--grid-margin);
    width: 100%;
    display: flex;
    gap: var(--measure-0500);
    flex-direction: row;
    overflow: hidden;
    align-items: center;
    position: relative;
}

.container-slide-wrapper {
    display: flex;
    gap: var(--measure-1000);
    flex-direction: row;
    align-items: center;
    will-change: transform;
}

.container-slide img,
.container-slide-wrapper img {
    height: var(--measure-1250);
    margin: 0 var(--measure-0250);
    flex-shrink: 0;
}

.container-slide img.eureca,
.container-slide-wrapper img.eureca {
    height: var(--measure-1125);
}

.container-slide img.inter,
.container-slide-wrapper img.inter {
    margin-bottom: var(--measure-0125);
}

.container-slide img.vivo,
.container-slide-wrapper img.vivo {
    height: var(--measure-1500);
}

.container-slide img.santander,
.container-slide-wrapper img.santander,
.container-slide img.mrv,
.container-slide-wrapper img.mrv,
.container-slide img.nike,
.container-slide-wrapper img.nike {
    margin-right: 0;
}

.container-slide-wrapper {
    display: flex;
    gap: var(--measure-1000);
    flex-direction: row;
    align-items: center;
    will-change: transform;
}