:root {
    --t-dark: #20232a;
    --t-light: #fec303;
    --t-border-width: 2px;
}

.t-container {
    font-family: Exo2;
    overflow: hidden;
    width: 100%;
}

.t-container-sm {
    max-width: 600px;
}

.t-container-lg {
    max-width: 800px !important;
}

.t-border {
    border-style: solid;
    border-width: var(--t-border-width);
    border-color: var(--t-light);
}

.t-box {
    background-color: var(--t-dark);
    border-color: var(--t-light);
    border-style: solid;
    border-width: var(--t-border-width);
}

.t-header {
    background-color: var(--t-light);
    color: var(--t-dark);
}

.t-img-box {
    flex: 1 1 50%;
    overflow: hidden;
}

.t-img {
    width: 150px;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

.t-icon {
    width: 18px;
    height: 18px;
}

.t-footer {
    background-image: url('/icons/transformation-footer.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    min-height: 38px;
    width: 304px;
    color: var(--t-light);
}

.t-header-before {
    background-image: url('/icons/transformation-before.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    min-height: 38px;
}

.t-header-after {
    background-image: url('/icons/transformation-after.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    min-height: 38px;
}

.t-text-light {
    color: var(--t-light);
}
.t-text-dark {
    color: var(--t-dark);
}

/* Mobile / Tablet */
@media (max-width: 992px) {
    .t-container {
        width: 304px;
        min-width: 304px;
        max-width: 304px;
    }
}