.afterschool_body {
    background-color: var(--blue0);
    position: relative;
    width: 100%;
    min-height: 60vh; /* or whatever height you want */
    display: flex;
    flex-direction: row;
    justify-content: center;  /* horizontal centering */
    align-items: center;      /* vertical centering */
    padding: 10px;             /* prevents margin collapse */
}

.afterschool_text {
    color: var(--base);
    text-align: justify;
    width: 80%;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .afterschool_text {
        width: 70%;
    }
}

@media (min-width: 1800px) {
    .afterschool_text {
        width: 50%;
    }
}

.afterschool_body_right iframe{
    width: 100%;
    max-width: 900px;   /* optional cap on very wide screens */
    border: 0;
    display: block;
    margin: 0 auto;
}

.schools{
    background-color: var(--base);
    color: var(--blue0);
    position: relative;
    height: auto;
    width: 100%;
    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap;
}

.schools_header_box{
    background-color: var(--base);
    position:relative;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
}

.schools_header{
    font-size: 10vw;
}


.schools_list_full{
    display: flex;
    flex-direction: column;
    align-items: center; /* centers everything horizontally */
    width: 100%;
}

.schools_list_half{
    display: none;
}

.town_name{
    font-size: 5vmax;
}

.school_name {
    list-style-position: outside; /* default, keeps bullets aligned */
    text-align: left;             /* keep text left-aligned */
    padding-left: 1.2rem;         /* normal bullet indentation */
    margin: 0 0 1.5rem 0;
    width: fit-content;           /* shrink to content width */
    font-size: 4vmax;
}

.schools_list{
    position: relative;
    width:auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
}

@media (min-width: 768px) {
    .schools_list_full{
        display: none;
    }

    .schools_list_half{
        width: 50%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .schools_spacer{
        display: none;
    }

    .schools_header{
        font-size: 5vw;
    }

    .town_name{
        font-size: 3vmax;
    }

    .school_name {
        font-size: 2vmax;
    }
}

@media (min-width: 1200px){

    .schools_header{
        font-size: 3vw;
    }

    .town_name{
        font-size: 2vmax;
    }

    .school_name {
        font-size: 1.5vmax;
    }
}

.school_name a {
  text-decoration: none;   /* removes underline */
  transition: transform 0.2s ease, font-size 0.2s ease;
  display: inline-block;   /* needed for transform */
}

.school_name a:hover {
  transform: scale(1.1);   /* enlarges smoothly */
}