@import url('global.css');
@import url('ejemplo-unidades.css');

.main {
    margin-top: 1.5rem;
}

.principal-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem 1rem;
}

.detailed-content {
    display: flex;
    flex-direction: column;
    background-color: var(--color-tertiary);
    margin: 3.5rem 0;
}

.secondary-text-group {
    margin: 1rem auto;
    text-align: center;
}

.breakdown-table {
    max-width: 90%;
    text-align: center;
    border-collapse: collapse;
    background-color: var(--color-table-odd);
    margin: 1rem auto;
  
    & th, & td {
      border: solid 1px var(--primary-light-color);
    }
  
    & thead {
      background-color: var(--violet-color);
  
      & th {
        padding: 0.8rem;
      }
    }
  
    & tr {
      & td {
        padding: 0.4rem;
      }
       
      &:nth-child(even) {
        background-color: var(--color-table-even);
      }
    }
}
  
.text-title {
  text-shadow: white 0px 0px 3px;
}

.text-list {
    padding: 0 1.5rem;
}

.text-group + .text-group {
    .text-title {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
}

.example-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1em;
    width: 100%;
    margin: auto auto;
    text-align: center;
    padding: 1em;
    color: #fff;

    .example-title {
        flex: 0 1 auto;
    }

    .box {
        flex: 10 0 auto;
    }
}

@media (width >= 768px) {
    .text-group {
        max-width: 80%;
    }
}

@media (width >= 992px) {
    .example-wrapper {
        max-width: 60%;

        .box {
            flex-direction: row;
        }
    }
}

@media (width >= 1200px) {
    .text-group {
        max-width: 50%;
    }

    .relative-units-section {
        --relative-units-components-inline-margin: 1rem;

        display: grid;
        grid-template-areas: 
        "text free"
        "table example";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto;

        .secondary-text-group {
            grid-area: text;
            text-align: left;
            margin-left: var(--relative-units-components-inline-margin);
            padding-left: 0;
        }

        .breakdown-table {
            width: 100%;
            grid-area: table;
            margin-left: var(--relative-units-components-inline-margin);
        }

        .example-wrapper {
            grid-area: example;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
        }
    }
}